:root {
  --page-ink: #1d1d1f;
  --page-muted: #6e6e73;
  --page-line: rgba(29,29,31,.1);
  --page-paper: #f5f5f7;
  --page-blue: #2468b0;
  --page-violet: #74658a;
  --page-sage: #71897c;
  --page-ochre: #a1814e;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--page-ink); background: #fff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
img, svg { display: block; max-width: 100%; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid rgba(36,104,176,.42);
  outline-offset: 3px;
}
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 11px 15px;
  color: #fff;
  border-radius: 11px;
  background: #1d1d1f;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-150%);
  transition: opacity .18s ease, transform .18s ease;
}
.skip-link:focus { opacity: 1; pointer-events: auto; transform: none; }

.global-nav {
  position: fixed;
  z-index: 200;
  top: 14px;
  left: 50%;
  display: flex;
  width: min(1160px, calc(100% - 32px));
  min-height: 58px;
  align-items: center;
  gap: 24px;
  padding: 8px 10px 8px 14px;
  border: 1px solid rgba(29,29,31,.1);
  border-radius: 19px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 14px 45px rgba(29,29,31,.08), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
  transform: translateX(-50%);
  transition: opacity .35s ease, transform .35s ease;
}

body.intro-active .global-nav { pointer-events: none; opacity: 0; transform: translate(-50%,-18px); }
.global-brand { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.global-brand span { display: grid; width: 34px; height: 34px; color: #fff; border-radius: 10px; background: #1d1d1f; place-items: center; font-size: 17px; }
.global-links { display: flex; flex: 1; align-items: center; gap: 4px; }
.global-link, .nav-group > button { padding: 10px 11px; color: #5c5c61; border: 0; border-radius: 10px; background: transparent; font-size: 13px; font-weight: 560; cursor: pointer; white-space: nowrap; }
.global-link:hover, .global-link[aria-current="page"], .nav-group > button:hover, .nav-group:focus-within > button { color: #1d1d1f; background: #f2f2f4; }
.nav-group { position: relative; }
.nav-group > button { display: flex; align-items: center; gap: 5px; }
.nav-group > button svg { width: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nav-menu { position: absolute; top: calc(100% + 10px); left: 0; display: grid; width: 270px; gap: 3px; padding: 9px; border: 1px solid var(--page-line); border-radius: 16px; background: rgba(255,255,255,.97); box-shadow: 0 22px 65px rgba(29,29,31,.13); opacity: 0; pointer-events: none; transform: translateY(-7px); transition: opacity .18s ease, transform .18s ease; }
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu, .nav-group.is-open .nav-menu { opacity: 1; pointer-events: auto; transform: none; }
.nav-menu a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 11px; font-size: 12px; }
.nav-menu a:hover, .nav-menu a[aria-current="page"] { background: #f5f5f7; }
.nav-menu i { display: grid; width: 29px; height: 29px; color: #3d536c; border-radius: 9px; background: #eaf0f6; font-style: normal; place-items: center; }
.global-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.nav-signin, .nav-start { padding: 10px 14px; border-radius: 11px; font-size: 12px; font-weight: 650; }
.nav-signin { color: #4f4f54; }
.nav-start { color: #fff; background: #1d1d1f; }
.nav-toggle { display: none; width: 40px; height: 40px; border: 0; border-radius: 11px; background: #f2f2f4; place-items: center; }
.nav-toggle span, .nav-toggle::before, .nav-toggle::after { width: 17px; height: 1.5px; background: #1d1d1f; content: ""; }

.page-shell { min-height: 100vh; padding-top: 90px; }
.page-hero { position: relative; display: grid; width: min(1180px, 90vw); min-height: 770px; margin: 0 auto; place-items: center; overflow: hidden; }
.page-hero::before { position: absolute; inset: 16% 13%; border-radius: 50%; background: radial-gradient(circle, rgba(36,104,176,.055), transparent 66%); content: ""; }
.page-hero-copy { position: relative; z-index: 2; width: min(860px, 80vw); text-align: center; }
.page-kicker { margin: 0 0 22px; color: var(--page-blue); font-size: 14px; font-weight: 650; }
.page-hero h1 { margin: 0; font-size: clamp(64px, 7.1vw, 112px); font-weight: 650; line-height: .91; letter-spacing: -.067em; }
.page-hero h1 span { color: #4b4b50; }
.page-lead { max-width: 720px; margin: 30px auto 0; color: var(--page-muted); font-size: clamp(19px, 1.65vw, 25px); line-height: 1.43; letter-spacing: -.03em; }
.page-actions { display: flex; justify-content: center; gap: 10px; margin-top: 34px; }
.page-button { display: inline-flex; align-items: center; gap: 9px; padding: 13px 18px; border: 1px solid #1d1d1f; border-radius: 999px; color: #fff; background: #1d1d1f; font-size: 14px; font-weight: 650; }
.page-button.secondary { color: #1d1d1f; border-color: var(--page-line); background: #fff; }

.error-shell { display: grid; min-height: 100vh; padding: 110px 24px 48px; place-items: center; }
.error-card { width: min(980px, 100%); padding: clamp(42px, 8vw, 100px); border: 1px solid var(--page-line); border-radius: 42px; background: linear-gradient(145deg, #fff, #f5f5f7); box-shadow: 0 34px 100px rgba(29,29,31,.08); }
.error-card h1 { margin: 0; font-size: clamp(54px, 8vw, 112px); line-height: .92; letter-spacing: -.068em; }
.error-card h1 span { color: #6e6e73; }
.error-card > p:not(.page-kicker) { max-width: 650px; margin: 28px 0 0; color: var(--page-muted); font-size: clamp(18px, 2vw, 25px); line-height: 1.45; }
.error-card .page-actions { justify-content: flex-start; }

.page-visual { position: relative; z-index: 2; width: min(980px, 86vw); min-height: 330px; margin: -60px auto 110px; padding: 22px; border: 1px solid var(--page-line); border-radius: 31px; background: #f5f5f7; box-shadow: 0 30px 90px rgba(29,29,31,.1); }
.visual-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; color: #8d8d92; font-size: 10px; }
.visual-bar i { width: 8px; height: 8px; border-radius: 50%; background: #c9c9cd; }
.visual-bar b { margin-left: auto; color: #667d71; font-weight: 650; }
.visual-grid { display: grid; grid-template-columns: .82fr 1.4fr 1fr; gap: 13px; min-height: 250px; }
.visual-card { padding: 17px; border: 1px solid rgba(29,29,31,.08); border-radius: 19px; background: #fff; box-shadow: 0 10px 30px rgba(29,29,31,.045); }
.visual-card small { color: #929297; font-size: 9px; }
.visual-card h3 { margin: 5px 0 17px; font-size: 15px; letter-spacing: -.02em; }
.mini-row { display: flex; align-items: center; gap: 9px; margin-top: 8px; padding: 10px; border-radius: 11px; color: #626267; background: #f5f5f7; font-size: 9px; }
.mini-row i { display: grid; width: 25px; height: 25px; color: #355c8a; border-radius: 8px; background: #e8eff6; font-style: normal; place-items: center; }
.mini-row b { margin-left: auto; color: #71897c; font-size: 8px; }
.mini-message { max-width: 85%; margin: 10px 0; padding: 11px 12px; border-radius: 13px 13px 13px 4px; color: #515156; background: #f2f2f4; font-size: 10px; line-height: 1.4; }
.mini-message.answer { margin-left: auto; color: #fff; border-radius: 13px 13px 4px 13px; background: #1d1d1f; }
.mini-metric { margin-top: 13px; padding-top: 13px; border-top: 1px solid #ededee; }
.mini-metric strong { display: block; font-size: 31px; letter-spacing: -.05em; }
.mini-metric span { color: #71897c; font-size: 9px; }

/* Product overview: a real, interactive operation stage. */
.live-product-stage {
  position: relative;
  width: min(1420px, calc(100% - 32px));
  margin: -54px auto 120px;
  padding: clamp(34px, 4vw, 62px);
  border-radius: 42px;
  color: var(--page-ink);
  border: 1px solid rgba(29,29,31,.09);
  background: #fff;
  box-shadow: 0 38px 110px rgba(29,29,31,.09);
  overflow: hidden;
}
.live-product-stage::before { position: absolute; inset: 0; background: linear-gradient(180deg, #fff 0%, #fff 72%, #f7f7f8 100%); content: ""; pointer-events: none; }
.live-stage-heading { position: relative; z-index: 1; display: flex; max-width: 1180px; margin: 0 auto 30px; align-items: end; justify-content: space-between; gap: 30px; }
.live-stage-heading span { display: block; margin-bottom: 8px; color: #456b96; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .11em; }
.live-stage-heading h2 { margin: 0; font-size: clamp(30px, 3.2vw, 50px); font-weight: 620; line-height: 1; letter-spacing: -.045em; }
.live-stage-heading p { width: min(390px, 38vw); margin: 0; color: #74747a; font-size: 14px; line-height: 1.5; }
.live-stage-illustration { position: relative; z-index: 1; width: min(1240px, 100%); height: clamp(220px, 26vw, 350px); margin: -8px auto 0; overflow: hidden; }
.relay-svg { width: 100%; height: 100%; overflow: visible; }
.relay-person { opacity: 0; will-change: transform, opacity; }
.relay-body { fill: #fff; stroke: #1d1d1f; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.relay-limb, .relay-face { fill: none; stroke: #1d1d1f; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.relay-limb { transform-box: fill-box; transform-origin: 50% 8%; }
.relay-object { transform-box: fill-box; transform-origin: center; }
.relay-object path, .relay-object rect, .relay-object circle { stroke: #1d1d1f; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.relay-chat path { fill: #315b9a; }.relay-chat circle { fill: #fff; stroke: none; }
.relay-id rect { fill: #766782; }.relay-id circle { fill: #fff; }.relay-id path { fill: none; stroke: #fff; stroke-width: 3; }
.relay-calendar rect { fill: #fff; }.relay-calendar > circle { fill: #9282a0; stroke: none; }.relay-calendar path { fill: none; }
.relay-approval circle { fill: #eef2ea; }.relay-approval path { fill: none; stroke: #78906f; stroke-width: 7; }
.relay-audit path:first-child { fill: #dfe6df; }.relay-audit path:not(:first-child) { fill: none; }.relay-audit circle { fill: #7b8d78; stroke: none; }
.live-stage-illustration.is-walking .relay-leg-a { animation: relayLegA .42s ease-in-out infinite alternate; }
.live-stage-illustration.is-walking .relay-leg-b { animation: relayLegB .42s ease-in-out infinite alternate; }
.live-stage-illustration.is-walking .relay-arm-a { animation: relayLegB .42s ease-in-out infinite alternate; }
.live-stage-illustration.is-walking .relay-arm-b { animation: relayLegA .42s ease-in-out infinite alternate; }
.live-stage-illustration.is-settled .relay-object { animation: relayObjectPulse 3.8s ease-in-out infinite; }
.live-stage-illustration.is-settled .relay-id { animation-delay: .45s; }.live-stage-illustration.is-settled .relay-calendar { animation-delay: .9s; }.live-stage-illustration.is-settled .relay-approval { animation-delay: 1.35s; }.live-stage-illustration.is-settled .relay-audit { animation-delay: 1.8s; }
@keyframes relayLegA { from { transform: rotate(13deg); } to { transform: rotate(-13deg); } }
@keyframes relayLegB { from { transform: rotate(-13deg); } to { transform: rotate(13deg); } }
@keyframes relayObjectPulse { 0%, 76%, 100% { transform: translateY(0) scale(1); } 86% { transform: translateY(-5px) scale(1.035); } }
.live-app { position: relative; z-index: 2; max-width: 1180px; margin: -78px auto 0; color: var(--page-ink); border: 1px solid rgba(29,29,31,.12); border-radius: 25px; background: rgba(249,249,251,.98); box-shadow: 0 28px 80px rgba(29,29,31,.16), inset 0 1px 0 #fff; overflow: hidden; }
.live-app [hidden] { display: none !important; }
.live-app button, .live-app input { font: inherit; }
.live-app-bar { display: flex; height: 44px; align-items: center; padding: 0 16px; color: #8d8d92; border-bottom: 1px solid #e5e5e8; background: rgba(255,255,255,.86); font-size: 10px; }
.live-window-controls { display: flex; gap: 5px; margin-right: 13px; }
.live-window-controls i { width: 7px; height: 7px; border-radius: 50%; background: #d3d3d7; }
.live-app-bar b { display: flex; margin-left: auto; align-items: center; gap: 5px; color: #527663; font-size: 9px; }
.live-app-bar b i { width: 6px; height: 6px; border-radius: 50%; background: #33a56f; box-shadow: 0 0 0 4px rgba(51,165,111,.1); }
.live-app-grid { display: grid; grid-template-columns: 230px minmax(390px,1fr) 255px; min-height: 570px; }
.live-inbox, .live-conversation { border-right: 1px solid #e5e5e8; }
.live-inbox { display: flex; flex-direction: column; padding: 18px 12px 12px; background: #f4f4f6; }
.live-column-title { display: flex; align-items: center; justify-content: space-between; padding: 0 7px 13px; }
.live-column-title span { font-size: 13px; font-weight: 700; letter-spacing: -.02em; }
.live-column-title b { padding: 4px 6px; color: #77777d; border-radius: 6px; background: #e8e8eb; font-size: 8px; }
.live-search { display: flex; height: 31px; margin: 0 2px 10px; align-items: center; gap: 6px; padding: 0 9px; color: #9a9aa0; border: 1px solid #e0e0e3; border-radius: 9px; background: #fff; }
.live-search input { min-width: 0; border: 0; outline: 0; background: transparent; font-size: 9px; }
.live-contact-list { display: grid; gap: 4px; }
.live-contact { display: grid; grid-template-columns: 31px 1fr auto; width: 100%; align-items: center; gap: 8px; padding: 10px 8px; color: #616166; border: 0; border-radius: 11px; text-align: left; background: transparent; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.live-contact:hover { background: rgba(255,255,255,.7); }
.live-contact.is-active { color: #1d1d1f; background: #fff; box-shadow: 0 8px 24px rgba(29,29,31,.055); }
.live-contact > i { display: grid; width: 31px; height: 31px; color: #3c5e85; border-radius: 9px; background: #e7eef6; font-size: 8px; font-style: normal; place-items: center; }
.live-contact > span { display: grid; min-width: 0; gap: 3px; }
.live-contact strong { font-size: 9px; }
.live-contact small { overflow: hidden; color: #929297; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.live-contact time { align-self: start; color: #a2a2a7; font-size: 7px; }
.live-inbox-foot { margin-top: auto; padding: 12px 8px 3px; color: #8a8a90; border-top: 1px solid #e2e2e5; font-size: 8px; }
.live-inbox-foot span { color: #3ca776; }
.live-conversation { display: grid; grid-template-rows: 58px 1fr 57px; min-width: 0; background: #fff; }
.live-conversation-head { display: flex; align-items: center; justify-content: space-between; padding: 0 17px; border-bottom: 1px solid #ededee; }
.live-conversation-head > div { display: grid; gap: 2px; }
.live-conversation-head strong { font-size: 12px; }
.live-conversation-head span { color: #929297; font-size: 8px; }
.live-conversation-head button { color: #929297; border: 0; background: none; cursor: pointer; }
.live-thread { padding: 20px 23px 24px; overflow: auto; scrollbar-width: thin; scrollbar-color: #d7d7da transparent; }
.live-message { width: fit-content; max-width: 78%; margin-bottom: 10px; padding: 11px 13px; color: #4f4f54; border-radius: 15px 15px 15px 5px; background: #f1f1f3; font-size: 10px; line-height: 1.45; }
.live-message.from-agent { margin-left: auto; color: #fff; border-radius: 15px 15px 5px 15px; background: #25272c; }
.live-operation-card { width: min(390px, 92%); margin: 18px auto 0; padding: 16px; border: 1px solid #dfe2e8; border-radius: 17px; background: #fff; box-shadow: 0 16px 40px rgba(29,38,54,.1); }
.operation-card-head { display: flex; align-items: center; justify-content: space-between; color: #8c8c92; font-size: 8px; text-transform: uppercase; letter-spacing: .07em; }
.operation-card-head b { color: #516a87; font-size: 7px; }
.live-operation-card h3 { margin: 8px 0 10px; font-size: 16px; letter-spacing: -.03em; }
.operation-progress { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-bottom: 11px; }
.operation-progress i { height: 3px; border-radius: 99px; background: #e7e7ea; transition: background .35s ease; }
.operation-progress i.is-active { background: #456f9f; }
.live-operation-card > p { min-height: 28px; margin: 0 0 12px; color: #74747a; font-size: 9px; line-height: 1.45; }
.operation-working { display: flex; min-height: 44px; align-items: center; gap: 4px; margin-bottom: 10px; padding: 9px 11px; border-radius: 10px; background: #f5f5f7; }
.operation-working span { width: 5px; height: 5px; border-radius: 50%; background: #506f93; animation: livePulse .9s infinite alternate; }
.operation-working span:nth-child(2) { animation-delay: .18s; }.operation-working span:nth-child(3) { animation-delay: .36s; }
.operation-working em { margin-left: 6px; color: #76767b; font-size: 8px; font-style: normal; }
@keyframes livePulse { to { opacity: .25; transform: translateY(-3px); } }
.operation-slots { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 10px; }
.operation-slots button { display: grid; gap: 2px; padding: 9px 4px; color: #7c7c82; border: 1px solid #e2e2e5; border-radius: 9px; background: #f8f8f9; cursor: default; }
.operation-slots button:first-child { cursor: not-allowed; opacity: .45; }
.operation-slots button:not(:first-child):hover, .operation-slots button.is-selected { color: #294e79; border-color: #9bb6d4; background: #edf4fb; }
.operation-slots strong { font-size: 10px; }.operation-slots small { font-size: 7px; }
.operation-approval { display: flex; margin-bottom: 10px; padding: 9px; border: 1px solid #e4e4e6; border-radius: 10px; cursor: pointer; }
.operation-approval input { position: absolute; opacity: 0; }
.operation-approval > span { display: grid; grid-template-columns: 23px 1fr; width: 100%; column-gap: 8px; align-items: center; }
.operation-approval i { display: grid; grid-row: 1 / 3; width: 23px; height: 23px; color: transparent; border: 1px solid #d1d1d5; border-radius: 7px; font-style: normal; place-items: center; }
.operation-approval input:checked + span i { color: #fff; border-color: #466f9e; background: #466f9e; }
.operation-approval b { font-size: 8px; }.operation-approval small { color: #8b8b91; font-size: 7px; }
.operation-result { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; padding: 10px; border-radius: 11px; background: #edf5f0; }
.operation-result > i { display: grid; width: 27px; height: 27px; color: #fff; border-radius: 9px; background: #438661; font-style: normal; place-items: center; }
.operation-result span { display: grid; gap: 2px; }.operation-result strong { font-size: 9px; }.operation-result small { color: #668071; font-size: 7px; }
.operation-primary { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 10px 12px; color: #fff; border: 0; border-radius: 10px; background: #25272c; font-size: 9px; font-weight: 650; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.operation-primary:hover:not(:disabled) { background: #111215; transform: translateY(-1px); }
.operation-primary:disabled { cursor: not-allowed; opacity: .42; }
.live-composer { display: flex; margin: 8px 14px 12px; align-items: center; justify-content: space-between; padding: 8px 9px 8px 12px; color: #aaaab0; border: 1px solid #e3e3e6; border-radius: 12px; font-size: 9px; }
.live-composer button { display: grid; width: 28px; height: 28px; color: #fff; border: 0; border-radius: 9px; background: #25272c; place-items: center; }
.live-context { background: #f8f8f9; }
.live-context > nav { display: flex; height: 45px; gap: 15px; padding: 0 15px; border-bottom: 1px solid #e4e4e6; }
.live-context > nav button { position: relative; padding: 0; color: #99999e; border: 0; background: transparent; font-size: 9px; cursor: pointer; }
.live-context > nav button.is-active { color: #1d1d1f; font-weight: 650; }
.live-context > nav button.is-active::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: #406b9c; content: ""; }
.context-panel { padding: 13px; }
.context-panel section { margin-bottom: 9px; padding: 13px; border: 1px solid #e7e7e9; border-radius: 13px; background: #fff; }
.context-panel section > small { display: block; margin-bottom: 10px; color: #919197; font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }
.identity-row { display: flex; align-items: center; gap: 8px; }
.identity-row > i { display: grid; width: 31px; height: 31px; color: #355c8a; border-radius: 9px; background: #e8eff6; font-size: 8px; font-style: normal; place-items: center; }
.identity-row > span { display: grid; gap: 3px; }.identity-row strong { font-size: 9px; }.identity-row b { width: fit-content; padding: 2px 5px; color: #577664; border-radius: 5px; background: #edf5f0; font-size: 6px; }
.context-panel dl { margin: 11px 0 0; }.context-panel dl div { display: flex; padding-top: 7px; justify-content: space-between; color: #8d8d92; border-top: 1px solid #eeeeef; font-size: 7px; }.context-panel dt, .context-panel dd { margin: 0; }.context-panel dd { color: #4f4f54; }
.source-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.source-list li { display: grid; grid-template-columns: 23px 1fr auto; align-items: center; gap: 7px; color: #5d5d62; font-size: 8px; }
.source-list i { display: grid; width: 23px; height: 23px; color: #456b96; border-radius: 7px; background: #edf2f7; font-size: 7px; font-style: normal; place-items: center; }
.source-list b { color: #8b8b91; font-size: 6px; }.source-list li.is-verified b { color: #4d7e63; }
.context-summary { display: grid; gap: 4px; }.context-summary strong { font-size: 11px; letter-spacing: -.02em; }.context-summary span { color: #8c8c91; font-size: 7px; }
.audit-panel ol { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.audit-panel li { display: flex; gap: 8px; }.audit-panel li > i { width: 7px; height: 7px; margin-top: 3px; border: 2px solid #fff; border-radius: 50%; background: #49739f; box-shadow: 0 0 0 1px #adc0d5; }.audit-panel li span { display: grid; gap: 3px; }.audit-panel li strong { font-size: 8px; }.audit-panel li small { color: #929297; font-size: 7px; }
.live-app-footer { display: flex; height: 38px; align-items: center; justify-content: space-between; padding: 0 15px; color: #8d8d92; border-top: 1px solid #e5e5e8; background: #fff; font-size: 8px; }
.live-app-footer span { display: flex; align-items: center; gap: 6px; }.live-app-footer span i { width: 6px; height: 6px; border-radius: 50%; background: #a5a5aa; }
.live-app[data-phase="done"] .live-app-footer span i { background: #3ca270; }
.live-app-footer button { color: #68686d; border: 0; background: transparent; font-size: 8px; cursor: pointer; }

/* Attio-inspired satellite windows: real product states, not screenshot decoration. */
.live-satellite { position: absolute; z-index: 4; width: 224px; color: #1d1d1f; border: 1px solid rgba(29,29,31,.1); border-radius: 17px; background: rgba(255,255,255,.96); box-shadow: 0 24px 60px rgba(24,32,45,.16), inset 0 1px 0 rgba(255,255,255,.9); opacity: 0; overflow: hidden; pointer-events: none; backdrop-filter: blur(18px) saturate(1.08); -webkit-backdrop-filter: blur(18px) saturate(1.08); will-change: transform, opacity; }
.live-satellite > header { display: flex; height: 32px; align-items: center; gap: 5px; padding: 0 11px; color: #6d6d72; border-bottom: 1px solid #ececef; background: rgba(248,248,250,.92); }
.live-satellite > header i { width: 6px; height: 6px; border-radius: 50%; background: #d4d4d8; }
.live-satellite > header i:first-child { background: #ff6058; }.live-satellite > header i:nth-child(2) { background: #ffbd2e; }.live-satellite > header i:nth-child(3) { background: #28c840; }
.live-satellite > header strong { margin-left: 4px; font-size: 8px; font-weight: 650; letter-spacing: -.01em; }
.satellite-body { padding: 12px; }
.satellite-body > small { display: block; margin-bottom: 9px; color: #96969c; font-size: 7px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }
.satellite-body article { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 3px 7px; margin-top: 7px; padding: 9px; border: 1px solid #ebebee; border-radius: 10px; background: #fff; }
.satellite-body article span, .satellite-body article b { width: fit-content; padding: 2px 5px; border-radius: 5px; font-size: 6px; }
.satellite-body article span { color: #477563; background: #e8f3ed; }.satellite-body article b { color: #52725e; background: #eaf6ee; font-weight: 650; }
.satellite-body article strong, .satellite-body article p { grid-column: 1 / -1; margin: 0; }
.satellite-body article strong { margin-top: 4px; font-size: 8px; }.satellite-body article p { color: #8d8d93; font-size: 7px; }
.satellite-leads { top: 414px; left: 13px; transform: rotate(-1.2deg); }
.satellite-command { top: 714px; left: 22px; width: 248px; color: #f4f4f5; border-color: rgba(255,255,255,.12); background: rgba(24,25,28,.98); transform: rotate(1.1deg); }
.satellite-command > header { color: #c2c2c7; border-color: rgba(255,255,255,.09); background: #222328; }
.command-lines { display: grid; gap: 7px; padding: 12px 13px 14px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.command-lines p { margin: 0; color: #7e7f85; font-size: 7px; line-height: 1.35; transition: color .25s ease, transform .25s ease; }
.command-lines p b, .command-lines p span { display: inline-block; width: 13px; color: #898a90; }
.command-lines p.is-active { color: #fff; transform: translateX(2px); }.command-lines p.is-active b, .command-lines p.is-active span { color: #79a9ff; }
.command-lines p.is-done { color: #bfc2c8; }.command-lines p.is-done b, .command-lines p.is-done span { color: #70c397; }
.satellite-copilot { top: 398px; right: 12px; width: 260px; transform: rotate(1.15deg); }
.satellite-copilot h3 { margin: 0; font-size: 13px; font-weight: 650; line-height: 1.2; letter-spacing: -.025em; transition: opacity .2s ease; }
.satellite-copilot p { margin: 8px 0 0; color: #85858b; font-size: 7px; line-height: 1.45; }
.source-pills { display: flex; gap: 5px; margin-top: 10px; }
.source-pills span { padding: 4px 7px; color: #526d8b; border-radius: 99px; background: #edf3f9; font-size: 6px; font-weight: 650; }
.satellite-copilot.is-resolved .source-pills span { color: #527663; background: #eaf4ee; }
.satellite-activity { top: 738px; right: 21px; width: 220px; transform: rotate(-1.15deg); }
.satellite-activity ol { display: grid; gap: 0; margin: 0; padding: 10px 12px 12px; list-style: none; }
.satellite-activity li { position: relative; display: flex; min-height: 36px; gap: 8px; color: #9b9ba0; }
.satellite-activity li:not(:last-child)::after { position: absolute; top: 13px; bottom: -2px; left: 3px; width: 1px; background: #e0e2e5; content: ""; }
.satellite-activity li > i { position: relative; z-index: 1; width: 7px; height: 7px; margin-top: 3px; border: 2px solid #fff; border-radius: 50%; background: #c5c7ca; box-shadow: 0 0 0 1px #d5d7da; }
.satellite-activity li span { display: grid; align-content: start; gap: 2px; }.satellite-activity li b { font-size: 7px; }.satellite-activity li small { font-size: 6px; }
.satellite-activity li.is-current { color: #2c537e; }.satellite-activity li.is-current > i { background: #4c78a8; box-shadow: 0 0 0 1px #8eaccb; }
.satellite-activity li.is-done { color: #4c6355; }.satellite-activity li.is-done > i { background: #49a171; box-shadow: 0 0 0 1px #91c4a9; }

/* Inbox product page: full live workspace based on the real application structure. */
.inbox-page-hero::before { background: radial-gradient(circle, rgba(70,107,150,.06), transparent 66%); }
.inbox-family-transition { position: relative; width: min(1420px,calc(100% - 32px)); margin: -70px auto 74px; padding: 48px clamp(18px,4vw,62px) 18px; border: 1px solid rgba(29,29,31,.07); border-radius: 42px; background: #fff; box-shadow: 0 28px 80px rgba(29,29,31,.055); overflow: hidden; }
.inbox-family-transition::before { position: absolute; inset: 0; background: radial-gradient(circle at 50% 72%,rgba(67,98,135,.055),transparent 54%); content: ""; pointer-events: none; }
.inbox-family-sticky { position: relative; display: grid; min-height: 0; grid-template-rows: auto auto; align-content: start; overflow: hidden; }
.inbox-family-copy { position: relative; z-index: 2; width: min(840px,86vw); margin: 0 auto -6px; text-align: center; }
.inbox-family-copy > span { display: block; margin-bottom: 12px; color: #496e98; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.inbox-family-copy h2 { margin: 0; font-size: clamp(48px,5.6vw,84px); font-weight: 650; line-height: .91; letter-spacing: -.065em; }
.inbox-family-copy h2 em { color: #56565b; font-style: normal; }
.inbox-family-copy p { max-width: 610px; margin: 18px auto 0; color: #75757b; font-size: clamp(14px,1.25vw,18px); line-height: 1.45; letter-spacing: -.02em; }
.inbox-family-visual { position: relative; z-index: 1; width: min(1240px,100%); height: clamp(220px,26vw,350px); margin: 0 auto; overflow: hidden; }
.inbox-family-character { position: absolute; inset: 0; display: block; opacity: 0; transform: translateY(72px) scale(.975); transform-origin: 50% 86%; will-change: transform,opacity; }
.inbox-family-character img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 61%; user-select: none; -webkit-user-drag: none; }
.family-character-one { clip-path: polygon(0 0,22.4% 0,22.4% 100%,0 100%); }
.family-character-two { clip-path: polygon(22% 0,45.4% 0,45.4% 100%,22% 100%); }
.family-character-three { clip-path: polygon(45% 0,61.5% 0,61.5% 100%,45% 100%); }
.family-character-four { clip-path: polygon(61% 0,77.4% 0,77.4% 100%,61% 100%); }
.family-character-five { clip-path: polygon(77% 0,100% 0,100% 100%,77% 100%); }
.inbox-family-shadow { position: absolute; right: 4%; bottom: 7%; left: 4%; height: 15%; border-radius: 50%; background: rgba(29,29,31,.09); filter: blur(28px); opacity: .33; transform: scaleX(.84); }
@keyframes inboxFamilyHop { 0% { opacity: 0; transform: translateY(70px) scale(.975); } 44% { opacity: 1; transform: translateY(-25px) scale(1.01); } 68% { transform: translateY(7px) scale(.995); } 84% { transform: translateY(-7px) scale(1.003); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.inbox-family-transition.is-playing .inbox-family-character { animation: inboxFamilyHop .95s cubic-bezier(.22,.8,.25,1) both; }
.inbox-family-transition.is-playing .family-character-two { animation-delay: .1s; }.inbox-family-transition.is-playing .family-character-three { animation-delay: .2s; }.inbox-family-transition.is-playing .family-character-four { animation-delay: .3s; }.inbox-family-transition.is-playing .family-character-five { animation-delay: .4s; }
.inbox-family-transition.is-static .inbox-family-character { opacity: 1; transform: none; }
.inbox-showcase { position: relative; width: min(1480px, calc(100% - 32px)); margin: -52px auto 100px; padding: clamp(25px, 3.5vw, 52px); border: 1px solid rgba(29,29,31,.08); border-radius: 42px; background: linear-gradient(180deg,#fff 0%,#f7f8fa 100%); box-shadow: 0 38px 110px rgba(29,29,31,.09); overflow: hidden; scroll-margin-top: 82px; }
.inbox-showcase::before { position: absolute; inset: 0; background-image: radial-gradient(rgba(68,101,137,.12) .6px,transparent .6px); background-size: 17px 17px; opacity: .18; content: ""; pointer-events: none; }
.inbox-showcase-heading { position: relative; z-index: 1; display: flex; width: min(1280px,100%); margin: 0 auto 34px; align-items: end; justify-content: space-between; gap: 40px; }
.inbox-showcase-heading span { color: #496e98; font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .11em; }
.inbox-showcase-heading h2 { margin: 10px 0 0; font-size: clamp(36px,4vw,62px); font-weight: 630; line-height: .96; letter-spacing: -.055em; }
.inbox-showcase-heading p { width: min(390px,34vw); margin: 0 0 3px; color: #74747a; font-size: 14px; line-height: 1.5; }
.inbox-workspace { position: relative; z-index: 1; width: min(1360px,100%); margin: 0 auto; border: 1px solid rgba(29,29,31,.12); border-radius: 25px; color: #1d1d1f; background: #fff; box-shadow: 0 32px 82px rgba(29,29,31,.15), inset 0 1px 0 #fff; overflow: hidden; }
.inbox-workspace button,.inbox-workspace input { font: inherit; }
.iw-browser-bar { display: flex; height: 43px; align-items: center; justify-content: space-between; padding: 0 15px; color: #8c8c92; border-bottom: 1px solid #e5e6e9; background: rgba(250,250,251,.96); font-size: 9px; }
.iw-browser-bar > div { display: flex; align-items: center; gap: 6px; }.iw-browser-bar > div i { width: 7px; height: 7px; border-radius: 50%; background: #d4d4d8; }.iw-browser-bar > div i:first-child { background: #ff6058; }.iw-browser-bar > div i:nth-child(2) { background: #ffbd2e; }.iw-browser-bar > div i:nth-child(3) { background: #28c840; }.iw-browser-bar > div span { margin-left: 5px; }
.iw-browser-bar > b { display: flex; align-items: center; gap: 6px; color: #4f755f; font-size: 9px; }.iw-browser-bar > b i { width: 6px; height: 6px; border-radius: 50%; background: #39a86f; box-shadow: 0 0 0 4px rgba(57,168,111,.11); }
.iw-grid { display: grid; grid-template-columns: 292px minmax(520px,1fr) 325px; min-height: 720px; }
.iw-list-pane { display: flex; min-width: 0; flex-direction: column; border-right: 1px solid #e3e5e8; background: #f5f6f8; }
.iw-list-pane > header { display: flex; min-height: 67px; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #e2e4e7; }
.iw-list-pane > header > div { display: grid; gap: 4px; }.iw-list-pane > header strong { font-size: 14px; letter-spacing: -.02em; }.iw-list-pane > header span { color: #9297a0; font-size: 8px; }.iw-list-pane > header button { padding: 9px 10px; color: #626873; border: 1px solid #d9dde2; border-radius: 9px; background: #fff; font-size: 8px; }
.iw-search { display: flex; height: 38px; margin: 12px 13px 8px; align-items: center; gap: 8px; padding: 0 11px; color: #90959e; border: 1px solid #dde1e5; border-radius: 11px; background: #fff; }
.iw-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 10px; }.iw-search input::placeholder { color: #9a9fa7; }
.iw-filters { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 13px 10px; }
.iw-filters button { padding: 7px 9px; color: #626975; border: 1px solid #dce0e5; border-radius: 99px; background: #fff; font-size: 8px; font-weight: 650; cursor: pointer; }.iw-filters button.is-active { color: #fff; border-color: #20242a; background: #20242a; }.iw-filters button b { display: inline-grid; min-width: 16px; height: 16px; margin-left: 3px; border-radius: 99px; background: rgba(255,255,255,.15); place-items: center; font-size: 7px; }
.iw-contact-list { display: grid; gap: 3px; padding: 0 9px; overflow: auto; scrollbar-width: thin; scrollbar-color: #d4d7dc transparent; }
.iw-contact { display: grid; grid-template-columns: 36px 1fr auto; min-width: 0; align-items: start; gap: 9px; padding: 12px 10px; color: #626975; border: 0; border-radius: 13px; text-align: left; background: transparent; cursor: pointer; transition: color .2s ease,background .2s ease,transform .2s ease; }.iw-contact:hover { background: rgba(255,255,255,.7); transform: translateX(2px); }.iw-contact.is-active { color: #1d1d1f; background: #fff; box-shadow: 0 10px 26px rgba(29,29,31,.07); }
.iw-contact > i { display: grid; width: 36px; height: 36px; color: #3e638d; border-radius: 11px; background: #e5edf6; font-size: 8px; font-style: normal; place-items: center; }.iw-contact:nth-child(2) > i { color: #477765; background: #e4f1e9; }.iw-contact:nth-child(3) > i { color: #806240; background: #f3eadf; }.iw-contact:nth-child(4) > i { color: #6b5681; background: #ede7f2; }
.iw-contact > span { display: grid; min-width: 0; gap: 3px; }.iw-contact strong { font-size: 9px; }.iw-contact small { overflow: hidden; color: #9398a1; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.iw-contact em { width: fit-content; margin-top: 3px; padding: 3px 6px; color: #4a775f; border-radius: 99px; background: #eaf4ee; font-size: 6px; font-style: normal; }.iw-contact time { color: #9ba0a8; font-size: 7px; }
.iw-list-pane > footer { display: grid; gap: 9px; margin-top: auto; padding: 11px 13px 13px; border-top: 1px solid #e1e3e7; }.iw-list-pane > footer button { padding: 11px; color: #fff; border: 0; border-radius: 12px; background: #17202a; font-size: 9px; font-weight: 650; cursor: pointer; }.iw-list-pane > footer button span { margin-right: 5px; }.iw-list-pane > footer i { color: #8f959d; font-size: 7px; font-style: normal; text-align: center; }
.iw-thread-pane { display: grid; min-width: 0; grid-template-rows: 67px minmax(0,1fr) auto; background: #fff; }
.iw-thread-head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 15px; padding: 0 16px; border-bottom: 1px solid #e6e7ea; }
.iw-active-person { display: flex; min-width: 0; align-items: center; gap: 9px; }.iw-active-person > i { display: grid; width: 34px; height: 34px; color: #41658d; border-radius: 50%; background: #e9f0f7; font-size: 8px; font-style: normal; place-items: center; }.iw-active-person > span { display: grid; min-width: 0; gap: 3px; }.iw-active-person strong { font-size: 11px; }.iw-active-person small { overflow: hidden; color: #9297a0; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.iw-thread-actions { display: flex; align-items: center; gap: 7px; }.iw-thread-actions > span { padding: 9px 10px; color: #8a9099; border: 1px solid #dfe2e6; border-radius: 9px; font-size: 7px; }.iw-thread-actions > span b { margin: 0 6px; color: #30343a; }.iw-thread-actions button { height: 34px; padding: 0 11px; border: 1px solid #dfe2e6; border-radius: 9px; background: #fff; font-size: 8px; cursor: pointer; }.iw-thread-actions button:last-child { color: #fff; border-color: #17202a; background: #17202a; }
.iw-thread { padding: 27px 25px; overflow: auto; scrollbar-width: thin; scrollbar-color: #dadce0 transparent; }
.iw-day { margin: 0 0 25px; color: #969ba3; font-size: 8px; text-align: center; }
.iw-bubble { width: fit-content; max-width: 76%; margin-bottom: 10px; padding: 12px 14px; color: #3e444d; border-radius: 15px 15px 15px 5px; background: #f2f3f5; font-size: 10px; line-height: 1.45; }.iw-bubble.agent { margin-left: auto; color: #fff; border-radius: 15px 15px 5px 15px; background: #252a31; }.iw-bubble time { display: block; margin-top: 6px; color: #9a9fa8; font-size: 6px; text-align: right; }.iw-bubble.agent time { color: #b9bec6; }
.iw-system-event { width: fit-content; margin: 18px auto; padding: 7px 10px; color: #6d7f93; border-radius: 99px; background: #edf2f7; font-size: 7px; font-weight: 650; }
.iw-composer { padding: 0 15px 14px; border-top: 1px solid #eceef0; }.iw-composer nav { display: flex; min-height: 36px; align-items: center; gap: 4px; }.iw-composer nav button { padding: 5px 7px; color: #747a84; border: 0; border-radius: 6px; background: transparent; font-size: 7px; cursor: pointer; }.iw-composer nav button.is-active { color: #27303a; background: #edf1f5; }.iw-composer nav span { margin-left: auto; color: #a0a4ab; font-size: 6px; }
.iw-composer label { display: grid; grid-template-columns: 32px 1fr 34px; min-height: 46px; align-items: center; gap: 4px; padding: 4px; border: 1px solid #dfe2e6; border-radius: 14px; background: #fff; }.iw-composer label button { display: grid; width: 32px; height: 32px; color: #6f7680; border: 0; border-radius: 10px; background: #f0f3f6; cursor: pointer; place-items: center; }.iw-composer label button:last-child { color: #fff; background: #17202a; }.iw-composer input { min-width: 0; border: 0; outline: 0; background: transparent; font-size: 9px; }
.iw-detail-pane { min-width: 0; border-left: 1px solid #e4e6e9; background: #fafafb; }.iw-detail-pane > header { display: grid; min-height: 67px; align-content: center; gap: 4px; padding: 0 15px; border-bottom: 1px solid #e5e7ea; background: #fff; }.iw-detail-pane > header strong { font-size: 12px; }.iw-detail-pane > header span { color: #969ba3; font-size: 8px; }
.iw-detail-pane > nav { display: flex; height: 45px; border-bottom: 1px solid #e5e7ea; background: #fff; }.iw-detail-pane > nav button { position: relative; flex: 1; padding: 0; color: #9297a0; border: 0; background: transparent; font-size: 8px; font-weight: 650; cursor: pointer; }.iw-detail-pane > nav button.is-active { color: #20252b; }.iw-detail-pane > nav button.is-active::after { position: absolute; right: 10px; bottom: 0; left: 10px; height: 2px; background: #293746; content: ""; }
.iw-detail-content { height: 608px; padding: 13px; overflow: auto; scrollbar-width: thin; scrollbar-color: #d8dade transparent; }.iw-tab-panel[hidden] { display: none !important; }
.iw-customer-card,.iw-detail-section,.iw-copilot-card { margin-bottom: 10px; padding: 14px; border: 1px solid #e3e5e8; border-radius: 14px; background: #fff; }
.iw-customer-card > div { display: flex; align-items: center; gap: 9px; }.iw-customer-card > div > i { display: grid; width: 40px; height: 40px; color: #456a92; border-radius: 50%; background: #e8f0f8; font-size: 9px; font-style: normal; place-items: center; }.iw-customer-card > div > span { display: grid; gap: 3px; }.iw-customer-card strong { font-size: 10px; }.iw-customer-card small { color: #969ba3; font-size: 7px; }.iw-customer-card > p { display: flex; gap: 5px; margin: 12px 0; }.iw-customer-card > p span { padding: 4px 6px; color: #56725f; border: 1px solid #dce7df; border-radius: 6px; background: #eef5f0; font-size: 6px; }.iw-customer-card dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding-top: 11px; border-top: 1px solid #e9eaed; }.iw-customer-card dl div { display: grid; gap: 4px; }.iw-customer-card dt { color: #969ba3; font-size: 7px; }.iw-customer-card dd { margin: 0; font-size: 8px; font-weight: 650; }
.iw-detail-section > small,.iw-copilot-card > small { display: block; margin-bottom: 11px; color: #8f959e; font-size: 7px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }.iw-detail-section dl { display: grid; gap: 9px; margin: 0; }.iw-detail-section dl div { display: flex; justify-content: space-between; gap: 10px; }.iw-detail-section dt { color: #9399a2; font-size: 8px; }.iw-detail-section dd { margin: 0; font-size: 8px; font-weight: 650; text-align: right; }.iw-detail-section > strong { display: block; font-size: 10px; }.iw-detail-section > p { margin: 6px 0 0; color: #8d939c; font-size: 7px; line-height: 1.5; }
.iw-source-row { display: flex; flex-wrap: wrap; gap: 5px; }.iw-source-row span { padding: 5px 7px; color: #526d8b; border-radius: 99px; background: #edf3f8; font-size: 6px; }.iw-source-row i { margin-left: 3px; color: #4b9469; font-style: normal; }
.iw-copilot-card { border-color: #d8e0e8; box-shadow: 0 14px 34px rgba(42,65,91,.07); }.iw-copilot-card > strong { display: block; font-size: 15px; line-height: 1.28; letter-spacing: -.025em; }.iw-copilot-card > p { margin: 11px 0; color: #818892; font-size: 8px; line-height: 1.5; }.iw-copilot-card > div { display: flex; gap: 5px; }.iw-copilot-card > div span { padding: 5px 7px; color: #526d8b; border-radius: 99px; background: #edf3f8; font-size: 6px; }
.iw-activity { display: grid; gap: 0; margin: 0; padding: 9px 4px; list-style: none; }.iw-activity li { position: relative; display: flex; min-height: 62px; gap: 10px; }.iw-activity li:not(:last-child)::after { position: absolute; top: 14px; bottom: 0; left: 4px; width: 1px; background: #dadddf; content: ""; }.iw-activity li > i { position: relative; z-index: 1; width: 9px; height: 9px; margin-top: 3px; border: 2px solid #fff; border-radius: 50%; background: #4c7ca9; box-shadow: 0 0 0 1px #a9bfd2; }.iw-activity li span { display: grid; align-content: start; gap: 4px; }.iw-activity li strong { font-size: 9px; }.iw-activity li small { color: #969ba3; font-size: 7px; }
.iw-status-bar { display: flex; height: 42px; align-items: center; justify-content: center; gap: 18px; color: #8d929a; border-top: 1px solid #e4e6e9; background: #fff; font-size: 8px; }.iw-status-bar span { display: flex; align-items: center; gap: 6px; color: #47765d; }.iw-status-bar span i { width: 6px; height: 6px; border-radius: 50%; background: #35a36b; box-shadow: 0 0 0 4px rgba(53,163,107,.1); }.iw-status-bar b { color: #555b64; font-weight: 600; }.iw-status-bar em { font-style: normal; }

@media (max-width: 1120px) {
  .iw-grid { grid-template-columns: 270px minmax(450px,1fr); }
  .iw-detail-pane { display: none; }
}

@media (max-width: 760px) {
  .inbox-family-transition { width: calc(100% - 16px); margin: -36px auto 40px; padding: 36px 0 8px; border-radius: 28px; }
  .inbox-family-sticky { min-height: 0; grid-template-rows: auto auto; padding: 0; }
  .inbox-family-copy { width: min(92vw,560px); margin-bottom: -5px; }.inbox-family-copy h2 { font-size: clamp(44px,13vw,64px); }.inbox-family-copy p { width: 86vw; font-size: 14px; }
  .inbox-family-visual { width: 112vw; height: 285px; margin-left: -6vw; }.inbox-family-character img { object-position: 50% 61%; }
  .inbox-showcase { width: calc(100% - 16px); margin-top: -15px; padding: 25px 9px 9px; border-radius: 28px; }
  .inbox-showcase-heading { display: block; padding: 0 9px; }.inbox-showcase-heading p { width: auto; margin-top: 14px; }
  .inbox-workspace { border-radius: 19px; }
  .iw-grid { grid-template-columns: 1fr; min-height: 650px; }
  .iw-list-pane { display: none; }
  .iw-thread-actions > span,.iw-thread-actions button:first-of-type { display: none; }
  .iw-thread { padding: 21px 14px; }.iw-composer nav span { display: none; }
  .iw-status-bar { gap: 9px; }.iw-status-bar b:nth-of-type(2),.iw-status-bar em { display: none; }
}

.page-section { padding: 120px 5vw; }
.section-inner { width: min(1120px, 90vw); margin: 0 auto; }
.section-heading { max-width: 780px; }
.section-heading h2 { margin: 0; font-size: clamp(50px, 5.4vw, 82px); font-weight: 650; line-height: .95; letter-spacing: -.06em; }
.section-heading h2 span { color: #68686d; }
.section-heading p { max-width: 680px; margin: 24px 0 0; color: var(--page-muted); font-size: 20px; line-height: 1.5; }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 58px; }
.proof-card { min-height: 270px; padding: 25px; border-radius: 25px; background: var(--page-paper); }
.proof-card:nth-child(2) { background: #eef2f0; }
.proof-card:nth-child(3) { background: #f1eef3; }
.proof-card span { display: grid; width: 38px; height: 38px; color: #355c8a; border-radius: 12px; background: #fff; place-items: center; }
.proof-card h3 { margin: 72px 0 10px; font-size: 23px; letter-spacing: -.035em; }
.proof-card p { margin: 0; color: var(--page-muted); font-size: 15px; line-height: 1.55; }

/* Inbox proof cards: real micro interfaces instead of empty text tiles. */
.inbox-proof-section { padding-top: 132px; }
.inbox-proof-grid { gap: 16px; }
.inbox-proof-card { position: relative; display: flex; min-height: 520px; flex-direction: column; padding: 22px; border: 1px solid rgba(29,29,31,.055); box-shadow: inset 0 1px 0 rgba(255,255,255,.78); overflow: hidden; transition: transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease; }
.inbox-proof-card:hover { transform: translateY(-6px); box-shadow: 0 26px 65px rgba(29,29,31,.1),inset 0 1px 0 #fff; }
.inbox-proof-card span { display: initial; width: auto; height: auto; color: inherit; border-radius: 0; background: none; }
.inbox-proof-card > .inbox-proof-num { display: grid; width: 38px; height: 38px; color: #355c8a; border: 1px solid rgba(29,29,31,.05); border-radius: 12px; background: rgba(255,255,255,.88); font-size: 11px; font-weight: 650; place-items: center; }
.inbox-proof-card h3 { margin: 24px 0 8px; font-size: 25px; }.inbox-proof-card > p { font-size: 14px; line-height: 1.5; }
.inbox-proof-ui { height: 245px; margin-top: 20px; padding: 13px; border: 1px solid rgba(29,29,31,.08); border-radius: 19px; background: rgba(255,255,255,.78); box-shadow: 0 16px 40px rgba(29,29,31,.055); overflow: hidden; }
.inbox-proof-ui header,.inbox-proof-ui footer { display: flex; align-items: center; justify-content: space-between; }
.inbox-proof-ui header { min-height: 38px; padding-bottom: 11px; border-bottom: 1px solid rgba(29,29,31,.075); }
.conversation-proof-ui header > div { display: flex; align-items: center; gap: 8px; }.conversation-proof-ui header > div > i { display: grid; width: 29px; height: 29px; color: #456a92; border-radius: 9px; background: #e8f0f8; font-size: 7px; font-style: normal; place-items: center; }.conversation-proof-ui header span { display: grid; gap: 2px; }.conversation-proof-ui header b { font-size: 9px; }.conversation-proof-ui header small { color: #9297a0; font-size: 6px; }.conversation-proof-ui header em { padding: 4px 6px; color: #4f775f; border-radius: 99px; background: #eaf4ee; font-size: 6px; font-style: normal; }
.conversation-proof-ui ol { display: grid; gap: 5px; margin: 9px 0; padding: 0; list-style: none; }.conversation-proof-ui li { display: grid; grid-template-columns: 27px 1fr auto; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 10px; background: rgba(245,246,248,.82); transition: transform .3s ease,background .3s ease; }.proof-conversation:hover .conversation-proof-ui li:nth-child(2) { background: #edf4f0; transform: translateX(3px); }.conversation-proof-ui li > i { display: grid; width: 27px; height: 27px; color: #41658d; border-radius: 8px; background: #e7eef6; font-size: 6px; font-style: normal; place-items: center; }.conversation-proof-ui li:nth-child(2) > i { color: #3f755d; background: #e4f1e9; }.conversation-proof-ui li:nth-child(3) > i { color: #806240; background: #f3eadf; }.conversation-proof-ui li > span { display: grid; gap: 2px; }.conversation-proof-ui li b { font-size: 7px; }.conversation-proof-ui li small,.conversation-proof-ui time { color: #969ba3; font-size: 5.5px; }.conversation-proof-ui footer { justify-content: center; gap: 8px; color: #6e7781; font-size: 6px; }.conversation-proof-ui footer i { width: 34px; height: 1px; background: #b9c7d4; }.conversation-proof-ui footer b { color: #3e6187; }
.ownership-proof-ui header span { display: flex; align-items: center; gap: 6px; color: #527662; font-size: 7px; font-weight: 650; }.ownership-proof-ui header span i { width: 6px; height: 6px; border-radius: 50%; background: #39a86f; box-shadow: 0 0 0 4px rgba(57,168,111,.1); }.ownership-proof-ui header > b { color: #969ba3; font-size: 6px; }
.ownership-route { display: grid; gap: 6px; padding: 13px 0 10px; }.ownership-route article { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 9px; padding: 11px; border: 1px solid rgba(29,29,31,.07); border-radius: 12px; background: #fff; }.ownership-route article > i { display: grid; width: 32px; height: 32px; color: #fff; border-radius: 9px; background: #1d1d1f; font-size: 8px; font-style: normal; place-items: center; }.ownership-route article:last-child > i { color: #526b86; background: #e8eef4; }.ownership-route article > span { display: grid; gap: 2px; }.ownership-route small { color: #969ba3; font-size: 6px; }.ownership-route strong { font-size: 8px; }.ownership-route article > b { padding: 4px 6px; color: #4f775f; border-radius: 99px; background: #eaf4ee; font-size: 6px; }.ownership-route article:last-child > b { color: #6f747c; background: #f0f1f3; }.ownership-route > em { height: 4px; color: #84909c; font-size: 10px; font-style: normal; line-height: 4px; text-align: center; }.ownership-proof-ui footer { justify-content: center; gap: 7px; color: #747b84; font-size: 6px; }.ownership-proof-ui footer i { width: 6px; height: 6px; border-radius: 50%; background: #39a86f; }
.context-proof-ui header span { color: #747b84; font-size: 7px; font-weight: 650; }.context-proof-ui header b { padding: 4px 6px; color: #4f775f; border-radius: 99px; background: #eaf4ee; font-size: 6px; }
.context-proof-ui ol { display: grid; gap: 0; margin: 10px 0 6px; padding: 0; list-style: none; }.context-proof-ui li { position: relative; display: grid; min-height: 48px; grid-template-columns: 12px 1fr auto; align-items: start; gap: 8px; }.context-proof-ui li:not(:last-child)::after { position: absolute; top: 12px; bottom: 0; left: 4px; width: 1px; background: #d8dce0; content: ""; }.context-proof-ui li > i { position: relative; z-index: 1; width: 9px; height: 9px; margin-top: 2px; border: 2px solid #fff; border-radius: 50%; background: #4c7ca9; box-shadow: 0 0 0 1px #a9bfd2; }.context-proof-ui li > span { display: grid; gap: 2px; }.context-proof-ui li b { font-size: 7px; }.context-proof-ui li small { color: #969ba3; font-size: 5.5px; }.context-proof-ui li em { color: #4f8a67; font-size: 8px; font-style: normal; }.context-proof-ui footer { justify-content: flex-start; gap: 5px; }.context-proof-ui footer span { padding: 4px 6px; color: #526d8b; border-radius: 99px; background: #edf3f8; font-size: 5.5px; }

@media (max-width: 820px) {
  .inbox-proof-grid { grid-template-columns: 1fr; }
  .inbox-proof-card { min-height: 500px; }
}

/* Product capability bento. Scoped so the remaining product and solution pages keep their own cards. */
.product-capabilities { padding-block: clamp(110px, 11vw, 180px); background: #fff; }
.product-capabilities .section-inner { width: min(1240px, 92vw); }
.capability-heading { display: flex; max-width: none; align-items: end; justify-content: space-between; gap: 60px; }
.capability-heading > div { flex: 1; }
.capability-heading .section-eyebrow { display: block; margin-bottom: 16px; color: #52749a; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .12em; }
.capability-heading h2 { font-size: clamp(54px, 6.2vw, 94px); }
.capability-heading p { width: min(390px, 34vw); margin: 0 0 5px; font-size: 17px; }
.product-capabilities .proof-grid { grid-template-columns: repeat(12, 1fr); gap: 15px; margin-top: 70px; }
.product-capabilities .proof-card { position: relative; min-height: 430px; padding: 27px; color: #1d1d1f; border: 1px solid rgba(29,29,31,.055); border-radius: 30px; background: #f4f5f7; box-shadow: inset 0 1px 0 rgba(255,255,255,.82); overflow: hidden; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; }
.product-capabilities .proof-card:hover { transform: translateY(-6px); box-shadow: 0 28px 70px rgba(29,29,31,.11), inset 0 1px 0 #fff; }
.product-capabilities .proof-card span { display: initial; width: auto; height: auto; color: inherit; border-radius: 0; background: none; }
.proof-card-inbox { grid-column: span 7; min-height: 520px !important; }
.proof-card-ai { grid-column: span 5; min-height: 520px !important; background: #eef3f7 !important; }
.proof-card-identity { grid-column: span 4; background: #f2eff4 !important; }
.proof-card-automation { grid-column: span 5; background: #f2f4f5 !important; }
.proof-card-analytics { grid-column: span 3; background: #eff3ef !important; }
.proof-card-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.product-capabilities .proof-card-top > span { display: grid; width: 38px; height: 38px; color: #3e6187; border: 1px solid rgba(29,29,31,.06); border-radius: 12px; background: rgba(255,255,255,.84); font-size: 11px; font-weight: 650; place-items: center; }
.proof-card-top > i { display: grid; width: 34px; height: 34px; color: #6e6e73; border-radius: 50%; background: rgba(255,255,255,.65); font-size: 14px; font-style: normal; opacity: 0; transform: translate(-8px, 8px); transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1); place-items: center; }
.product-capabilities .proof-card:hover .proof-card-top > i { opacity: 1; transform: translate(0); }
.proof-copy { position: relative; z-index: 2; max-width: 460px; margin-top: 46px; }
.product-capabilities .proof-copy > small { display: block; margin-bottom: 7px; color: #7d7d83; font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }
.product-capabilities .proof-card h3 { margin: 0 0 10px; font-size: clamp(25px, 2.2vw, 34px); font-weight: 620; letter-spacing: -.045em; }
.product-capabilities .proof-card p { max-width: 440px; font-size: 14px; line-height: 1.48; }
.proof-ui { position: absolute; z-index: 1; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.product-capabilities .proof-card:hover .proof-ui { transform: translateY(-5px); }

.inbox-preview { right: 25px; bottom: -32px; left: 25px; display: grid; grid-template-columns: 40% 60%; height: 238px; border: 1px solid rgba(29,29,31,.08); border-radius: 19px 19px 0 0; background: #fff; box-shadow: 0 24px 60px rgba(29,29,31,.12); overflow: hidden; }
.inbox-preview-list { padding: 15px 10px; border-right: 1px solid #e8e8eb; background: #f6f6f8; }
.inbox-preview-list > b { display: flex; align-items: center; justify-content: space-between; padding: 0 5px 11px; font-size: 9px; }
.inbox-preview-list > b em { padding: 3px 5px; color: #77777d; border-radius: 6px; background: #e9e9ec; font-size: 6px; font-style: normal; }
.inbox-preview-list > i { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; padding: 9px 7px; border-radius: 9px; font-style: normal; }
.inbox-preview-list > i.is-active { background: #fff; box-shadow: 0 7px 18px rgba(29,29,31,.055); }
.product-capabilities .inbox-preview-list > i > span { display: grid; flex: 0 0 25px; width: 25px; height: 25px; color: #42658d; border-radius: 8px; background: #e7eff7; font-size: 6px; place-items: center; }
.inbox-preview-list > i strong { display: grid; min-width: 0; gap: 2px; font-size: 7px; }.inbox-preview-list > i small { overflow: hidden; color: #9a9aa0; font-size: 6px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.inbox-preview-thread { padding: 16px; background: #fff; }
.inbox-preview-thread > small { color: #8e8e93; font-size: 7px; }
.inbox-preview-thread > p { width: fit-content; max-width: 86%; margin: 20px 0 8px; padding: 9px 10px; border-radius: 11px 11px 11px 4px; background: #f1f1f3; font-size: 7px; }
.inbox-preview-thread > p.reply { margin: 0 0 0 auto; color: #fff; border-radius: 11px 11px 4px 11px; background: #25272c; }
.inbox-preview-thread > b { position: absolute; right: 16px; bottom: 18px; padding: 6px 9px; color: #557461; border-radius: 99px; background: #ebf4ee; font-size: 6px; }.inbox-preview-thread > b i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #46a06f; }

.resolution-preview { right: 26px; bottom: -20px; left: 26px; min-height: 215px; padding: 21px; border: 1px solid rgba(68,94,122,.12); border-radius: 20px 20px 0 0; background: rgba(255,255,255,.88); box-shadow: 0 22px 55px rgba(41,63,88,.11); }
.resolution-preview > small { color: #79899a; font-size: 8px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }
.resolution-preview > strong { display: block; max-width: 290px; margin: 14px 0 20px; font-size: 19px; line-height: 1.25; letter-spacing: -.025em; }
.resolution-preview > div { display: flex; flex-wrap: wrap; gap: 6px; }
.product-capabilities .resolution-preview > div span { padding: 6px 8px; color: #496785; border-radius: 99px; background: #edf3f8; font-size: 7px; }.resolution-preview > div i { margin-left: 4px; color: #4a976a; font-style: normal; }
.resolution-preview > p { position: absolute; right: 20px; bottom: 18px; left: 20px; padding-top: 12px; border-top: 1px solid #e8ebee; font-size: 7px; }.resolution-preview > p i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #4c77a7; }

.identity-preview { right: 22px; bottom: 22px; left: 22px; padding: 16px; border: 1px solid rgba(29,29,31,.07); border-radius: 17px; background: rgba(255,255,255,.8); box-shadow: 0 18px 46px rgba(60,45,67,.08); }
.identity-preview > div { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; }
.identity-preview > div > i { display: grid; width: 34px; height: 34px; color: #65536f; border-radius: 10px; background: #eee7f1; font-size: 8px; font-style: normal; place-items: center; }
.identity-preview > div > span { display: grid; gap: 2px; }.identity-preview strong { font-size: 8px; }.identity-preview small { color: #94949a; font-size: 6px; }.identity-preview > div > b { padding: 4px 6px; color: #527663; border-radius: 99px; background: #eaf4ee; font-size: 6px; }
.identity-preview > p { display: flex; align-items: center; justify-content: center; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #ededee; }
.product-capabilities .identity-preview > p span { padding: 5px 7px; color: #696970; border-radius: 7px; background: #f3f3f5; font-size: 6px; }.identity-preview > p i { width: 20px; height: 1px; background: #cfd0d3; }

.automation-preview { right: 24px; bottom: 20px; left: 24px; display: grid; grid-template-columns: 1fr 14px 1fr 14px 1fr; align-items: center; }
.automation-preview > div { display: flex; min-height: 74px; align-items: center; gap: 9px; padding: 11px; border: 1px solid rgba(29,29,31,.075); border-radius: 13px; background: rgba(255,255,255,.84); box-shadow: 0 13px 32px rgba(29,29,31,.055); }
.product-capabilities .automation-preview > div > span { display: grid; flex: 0 0 25px; width: 25px; height: 25px; color: #456a92; border-radius: 8px; background: #e9f0f7; font-size: 7px; font-weight: 650; place-items: center; }
.automation-preview div p { display: grid; gap: 3px; margin: 0; }.automation-preview div small { color: #94949a; font-size: 5px; text-transform: uppercase; letter-spacing: .07em; }.automation-preview div strong { font-size: 7px; line-height: 1.25; }
.automation-preview > i { height: 1px; background: #bfc4c8; }

.analytics-preview { right: 23px; bottom: 22px; left: 23px; }
.analytics-preview > small { color: #78847c; font-size: 8px; font-weight: 650; }.analytics-preview > strong { display: block; margin: 7px 0 17px; font-size: 53px; line-height: 1; letter-spacing: -.07em; }.analytics-preview sup { margin-left: 2px; color: #60836c; font-size: 18px; }
.analytics-preview > div { display: flex; height: 94px; align-items: end; gap: 5px; padding: 0 4px 8px; border-bottom: 1px solid rgba(29,29,31,.1); }
.analytics-preview > div i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: #bac8be; }.analytics-preview > div i:last-child { background: #4f8060; }
.analytics-preview > p { display: flex; margin-top: 10px; justify-content: space-between; font-size: 7px; }.product-capabilities .analytics-preview > p span { color: #47775a; font-weight: 650; }

@media (max-width: 1040px) {
  .capability-heading { align-items: start; flex-direction: column; gap: 20px; }
  .capability-heading p { width: min(600px, 100%); }
  .product-capabilities .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .product-capabilities .proof-card { grid-column: span 1; }
  .proof-card-inbox { grid-column: 1 / -1 !important; }
  .proof-card-analytics { grid-column: 1 / -1 !important; }
}

@media (max-width: 720px) {
  .product-capabilities { padding-inline: 4vw; }
  .product-capabilities .section-inner { width: 100%; }
  .product-capabilities .proof-grid { grid-template-columns: 1fr; margin-top: 44px; }
  .product-capabilities .proof-card { grid-column: 1 !important; min-height: 420px; padding: 22px; }
  .proof-card-inbox, .proof-card-ai { min-height: 500px !important; }
  .proof-copy { margin-top: 36px; }
  .automation-preview { grid-template-columns: 1fr; gap: 5px; }
  .automation-preview > div { min-height: 53px; }.automation-preview > i { width: 1px; height: 8px; margin-left: 23px; }
}

/* Live capability pages: one visual system, four product-specific demonstrations. */
.product-family-transition { margin-bottom: 96px; }
.product-family-transition .inbox-family-copy { display: grid; gap: 8px; margin-bottom: -2px; }
.product-family-transition .inbox-family-copy small { color: #496e98; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.product-family-transition .inbox-family-copy strong { font-size: clamp(46px,5vw,76px); font-weight: 650; line-height: .92; letter-spacing: -.06em; }
.product-family-transition .inbox-family-copy strong span { color: #69696e; }

.feature-showcase { position: relative; width: min(1480px,calc(100% - 32px)); margin: 0 auto 120px; padding: clamp(25px,3.5vw,52px); border: 1px solid rgba(29,29,31,.075); border-radius: 42px; background: linear-gradient(180deg,#fff 0%,#f7f8fa 100%); box-shadow: 0 38px 110px rgba(29,29,31,.09); overflow: hidden; scroll-margin-top: 84px; }
.feature-showcase::before { position: absolute; inset: 0; background-image: radial-gradient(rgba(68,101,137,.11) .65px,transparent .65px); background-size: 17px 17px; opacity: .18; content: ""; pointer-events: none; }
.feature-showcase-heading { position: relative; z-index: 1; display: flex; width: min(1280px,100%); margin: 0 auto 34px; align-items: end; justify-content: space-between; gap: 42px; }
.feature-showcase-heading > div { display: grid; gap: 10px; }
.feature-showcase-heading small { color: #496e98; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; }
.feature-showcase-heading h2 { max-width: 850px; margin: 0; font-size: clamp(38px,4.4vw,66px); font-weight: 630; line-height: .96; letter-spacing: -.055em; }
.feature-showcase-heading > p { width: min(390px,34vw); margin: 0 0 4px; color: #74747a; font-size: 14px; line-height: 1.5; }
.feature-workspace { position: relative; z-index: 1; width: min(1360px,100%); margin: 0 auto; border: 1px solid rgba(29,29,31,.12); border-radius: 25px; color: #1d1d1f; background: #fff; box-shadow: 0 32px 82px rgba(29,29,31,.14),inset 0 1px 0 #fff; overflow: hidden; }
.feature-workspace button { font: inherit; }
.fw-browser-bar { display: flex; height: 45px; align-items: center; justify-content: space-between; padding: 0 16px; color: #8d9299; border-bottom: 1px solid #e4e6e9; background: #fafafb; font-size: 9px; }
.fw-browser-bar > span { display: flex; gap: 6px; }.fw-browser-bar > span i { width: 7px; height: 7px; border-radius: 50%; background: #d4d4d8; }.fw-browser-bar > span i:first-child { background: #ff6058; }.fw-browser-bar > span i:nth-child(2) { background: #ffbd2e; }.fw-browser-bar > span i:nth-child(3) { background: #28c840; }
.fw-browser-bar > b { position: absolute; left: 50%; color: #6f747c; font-size: 9px; font-weight: 600; transform: translateX(-50%); }
.fw-browser-bar > em { display: flex; align-items: center; gap: 6px; color: #4f775f; font-size: 8px; font-style: normal; font-weight: 650; }.fw-browser-bar > em::before { width: 6px; height: 6px; border-radius: 50%; background: #39a86f; box-shadow: 0 0 0 4px rgba(57,168,111,.1); content: ""; }
.feature-film-controls { display: grid; min-height: 48px; grid-template-columns: 170px minmax(120px,1fr) 42px 34px; align-items: center; gap: 12px; padding: 0 16px; border-top: 1px solid #e5e7ea; background: #f8f8f9; }
.feature-film-controls > span { display: flex; align-items: center; gap: 8px; color: #717780; font-size: 8px; }.feature-film-controls > span i { width: 7px; height: 7px; border: 2px solid #b9bec4; border-top-color: #496f99; border-radius: 50%; animation: featureFilmSpin .75s linear infinite; }.feature-film-controls > span b { font-weight: 650; }
.feature-film-controls > div { height: 4px; border-radius: 99px; background: #dfe2e6; overflow: hidden; }.feature-film-controls > div i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#496f99,#6b5681); }
.feature-film-controls time { color: #8d929a; font-size: 7px; text-align: right; }.feature-film-controls button { display: grid; width: 30px; height: 30px; color: #606873; border: 1px solid #d8dce1; border-radius: 9px; background: #fff; cursor: pointer; place-items: center; }
.feature-workspace.is-film-playing .feature-film-controls > span { color: #3d6188; }.feature-workspace.is-film-playing .feature-film-controls > div i { animation: featureFilmProgress var(--film-duration,3s) linear forwards; }.feature-workspace.is-film-complete .feature-film-controls > span { color: #4f795d; }.feature-workspace.is-film-complete .feature-film-controls > span i { border: 0; background: #4f8b64; animation: none; }.feature-workspace.is-film-complete .feature-film-controls > div i { width: 100%; background: #4f8b64; }
@keyframes featureFilmProgress { from { width: 0; } to { width: 100%; } }
@keyframes featureFilmSpin { to { transform: rotate(360deg); } }
.fw-status { display: flex; min-height: 43px; align-items: center; justify-content: center; gap: 24px; color: #8c929a; border-top: 1px solid #e5e7ea; background: #fff; font-size: 8px; }.fw-status span { display: flex; align-items: center; gap: 7px; color: #4d755f; }.fw-status span i { width: 6px; height: 6px; border-radius: 50%; background: #39a86f; box-shadow: 0 0 0 4px rgba(57,168,111,.1); }.fw-status b { color: #737982; font-weight: 550; }
.feature-primary { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: space-between; padding: 0 17px; color: #fff; border: 0; border-radius: 13px; background: #20252b; font-size: 12px; font-weight: 650; cursor: pointer; transition: transform .2s ease,background .2s ease; }.feature-primary:hover { background: #0d1116; transform: translateY(-1px); }.feature-primary:disabled { cursor: wait; opacity: .68; transform: none; }

/* AI resolution workspace */
.ai-live-grid { display: grid; min-height: 650px; grid-template-columns: .9fr 1.3fr .82fr; }
.ai-live-grid > * { min-width: 0; padding: 26px; }
.ai-request-pane { border-right: 1px solid #e4e6e9; background: #f5f6f8; }
.ai-request-pane > small,.ai-evidence-pane header small,.identity-history-pane header small,.automation-list > small,.automation-log > small,.analytics-breakdown > small { color: #8f959e; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.ai-request-pane h3 { margin: 48px 0 20px; padding: 20px; border-radius: 18px 18px 18px 5px; background: #fff; box-shadow: 0 16px 38px rgba(29,29,31,.07); font-size: clamp(18px,1.6vw,25px); font-weight: 560; line-height: 1.35; letter-spacing: -.03em; }
.ai-request-meta { display: flex; justify-content: space-between; color: #969ba3; font-size: 8px; }
.ai-intent { display: flex; margin-top: 42px; align-items: center; gap: 12px; padding: 15px; border: 1px solid #dfe4e9; border-radius: 15px; background: rgba(255,255,255,.76); }.ai-intent > i { display: grid; width: 35px; height: 35px; color: #41658d; border-radius: 11px; background: #e6eef6; font-style: normal; place-items: center; }.ai-intent span { display: grid; gap: 4px; }.ai-intent small { color: #9298a1; font-size: 7px; }.ai-intent b { font-size: 10px; }
.ai-trace-pane { display: flex; flex-direction: column; border-right: 1px solid #e4e6e9; background: #fff; }.ai-trace-pane > header { display: flex; align-items: start; justify-content: space-between; gap: 15px; }.ai-trace-pane > header span { display: grid; gap: 5px; }.ai-trace-pane > header small { color: #9399a2; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }.ai-trace-pane > header b { font-size: 19px; }.ai-trace-pane > header em { padding: 6px 8px; color: #607083; border-radius: 99px; background: #eef2f6; font-size: 7px; font-style: normal; font-weight: 650; }
.ai-trace-pane ol { display: grid; gap: 0; margin: 32px 0 auto; padding: 0; list-style: none; }.ai-trace-pane li { position: relative; display: grid; min-height: 86px; grid-template-columns: 42px 1fr auto; align-items: start; gap: 13px; padding: 12px 0; opacity: .55; transition: opacity .3s ease,transform .3s ease; }.ai-trace-pane li:not(:last-child)::after { position: absolute; top: 55px; bottom: -8px; left: 20px; width: 1px; background: #dce0e4; content: ""; }.ai-trace-pane li > i { position: relative; z-index: 1; display: grid; width: 42px; height: 42px; color: #51687f; border: 1px solid #dce2e8; border-radius: 13px; background: #eff3f7; font-size: 10px; font-style: normal; place-items: center; }.ai-trace-pane li > span { display: grid; gap: 5px; padding-top: 4px; }.ai-trace-pane li b { font-size: 11px; }.ai-trace-pane li small { color: #969ba3; font-size: 7px; }.ai-trace-pane li > em { padding-top: 6px; color: #989da5; font-size: 7px; font-style: normal; }.ai-trace-pane li.is-running { opacity: 1; transform: translateX(3px); }.ai-trace-pane li.is-running > i { color: #fff; border-color: #496f99; background: #496f99; box-shadow: 0 0 0 5px rgba(73,111,153,.1); }.ai-trace-pane li.is-done { opacity: 1; }.ai-trace-pane li.is-done > i { color: #fff; border-color: #4c906b; background: #4c906b; }.ai-trace-pane li.is-done > em { color: #4c815f; }
.ai-evidence-pane { background: #fafafb; }.ai-evidence-pane header { display: grid; gap: 5px; margin-bottom: 25px; }.ai-evidence-pane header b { font-size: 17px; }.ai-source { display: flex; margin-bottom: 9px; align-items: center; gap: 10px; padding: 13px; border: 1px solid #e2e5e8; border-radius: 13px; background: #fff; }.ai-source > i { display: grid; width: 33px; height: 33px; color: #496d93; border-radius: 10px; background: #e9f0f7; font-size: 8px; font-style: normal; place-items: center; }.ai-source span { display: grid; gap: 4px; }.ai-source small { color: #969ba3; font-size: 7px; }.ai-source b { color: #858b94; font-size: 8px; }.ai-source.is-verified b { color: #4f8060; }.ai-source.is-verified > i { color: #4f8060; background: #e8f2eb; }
.ai-result { margin-top: 25px; padding: 18px; border: 1px solid #dfe3e7; border-radius: 16px; background: #fff; }.ai-result small { display: block; color: #9197a0; font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }.ai-result strong { display: block; margin: 13px 0 6px; font-size: 16px; }.ai-result span { color: #959aa2; font-size: 7px; }.ai-result.is-done { border-color: #cfe1d5; box-shadow: 0 13px 35px rgba(62,123,82,.08); }.ai-result.is-done strong { color: #3e7652; }

/* Identity workspace */
.identity-live-grid { display: grid; min-height: 625px; grid-template-columns: 1.05fr .9fr .82fr; }
.identity-live-grid > * { min-width: 0; padding: 27px; }
.identity-source-pane { display: flex; flex-direction: column; border-right: 1px solid #e4e6e9; background: #f5f6f8; }.identity-source-pane > header { display: flex; justify-content: space-between; gap: 15px; }.identity-source-pane > header span { display: grid; gap: 5px; }.identity-source-pane > header small { color: #9399a2; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }.identity-source-pane > header b { font-size: 16px; }.identity-source-pane > header em { color: #8e949c; font-size: 7px; font-style: normal; }
.identity-source-list { display: grid; gap: 10px; margin: 34px 0 auto; }.identity-source-list > div { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: 16px; border: 1px solid #dde1e5; border-radius: 15px; background: #fff; transition: border .3s ease,transform .3s ease,box-shadow .3s ease; }.identity-source-list > div > i { display: grid; width: 42px; height: 42px; color: #526e8c; border-radius: 12px; background: #eaf0f6; font-size: 8px; font-style: normal; place-items: center; }.identity-source-list > div > span { display: grid; gap: 4px; }.identity-source-list small { color: #969ba3; font-size: 7px; }.identity-source-list b { font-size: 10px; }.identity-source-list em { color: #9a9fa7; font-size: 7px; font-style: normal; }.identity-source-list > div.is-matched { border-color: #cfe1d5; box-shadow: 0 11px 28px rgba(65,119,83,.08); transform: translateX(4px); }.identity-source-list > div.is-matched > i { color: #4c7d5c; background: #e9f2ec; }
.identity-profile-pane { display: flex; align-items: center; flex-direction: column; border-right: 1px solid #e4e6e9; text-align: center; background: #fff; }.identity-avatar { display: grid; width: 88px; height: 88px; margin-top: 37px; color: #634f70; border-radius: 28px; background: #eee7f1; font-size: 24px; font-weight: 650; place-items: center; }.identity-profile-pane > small { margin-top: 23px; color: #9298a1; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }.identity-profile-pane h3 { margin: 8px 0 4px; font-size: 31px; letter-spacing: -.04em; }.identity-profile-pane > p { margin: 0; color: #898f98; font-size: 9px; }.identity-profile-state { margin: 24px 0; padding: 8px 11px; color: #717780; border-radius: 99px; background: #f0f2f4; font-size: 7px; font-weight: 650; }.identity-profile-state.is-done { color: #4f795d; background: #e9f3ec; }.identity-profile-pane dl { display: grid; width: 100%; gap: 0; margin: 5px 0 0; text-align: left; }.identity-profile-pane dl div { display: flex; justify-content: space-between; gap: 14px; padding: 13px 2px; border-top: 1px solid #eceef0; }.identity-profile-pane dt { color: #9399a2; font-size: 8px; }.identity-profile-pane dd { margin: 0; font-size: 8px; font-weight: 650; }
.identity-history-pane { background: #fafafb; }.identity-history-pane header { display: grid; gap: 5px; }.identity-history-pane header b { font-size: 17px; }.identity-history-pane ol { display: grid; gap: 0; margin: 34px 0 0; padding: 0; list-style: none; }.identity-history-pane li { position: relative; display: flex; min-height: 94px; gap: 11px; color: #969ba3; transition: color .3s ease,transform .3s ease; }.identity-history-pane li:not(:last-child)::after { position: absolute; top: 15px; bottom: 0; left: 4px; width: 1px; background: #dadddf; content: ""; }.identity-history-pane li > i { position: relative; z-index: 1; width: 9px; height: 9px; margin-top: 3px; border: 2px solid #fff; border-radius: 50%; background: #b9bec5; box-shadow: 0 0 0 1px #d1d5d9; }.identity-history-pane li span { display: grid; align-content: start; gap: 5px; }.identity-history-pane li b { font-size: 10px; }.identity-history-pane li small { font-size: 7px; }.identity-history-pane li.is-active { color: #303841; transform: translateX(3px); }.identity-history-pane li.is-active > i { background: #4b8b64; box-shadow: 0 0 0 1px #8ebda0; }

/* Automation workspace */
.automation-live-canvas { display: grid; min-height: 700px; grid-template-columns: 260px minmax(540px,1fr) 270px; }
.automation-live-canvas > * { min-width: 0; }
.automation-list { padding: 26px 18px; border-right: 1px solid #e4e6e9; background: #f5f6f8; }.automation-list > button { display: grid; width: 100%; gap: 5px; margin-top: 14px; padding: 15px; color: #666d76; border: 1px solid transparent; border-radius: 14px; text-align: left; background: transparent; cursor: pointer; }.automation-list > button.is-active { color: #20252b; border-color: #dde1e5; background: #fff; box-shadow: 0 12px 30px rgba(29,29,31,.06); }.automation-list button b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.automation-list button span { color: #959aa2; font-size: 7px; }.automation-list dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 60px 0 0; }.automation-list dl div { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.7); }.automation-list dt { color: #969ba3; font-size: 7px; }.automation-list dd { margin: 5px 0 0; font-size: 20px; font-weight: 650; }
.automation-flow { background-image: radial-gradient(#dce1e5 .65px,transparent .65px); background-size: 17px 17px; }.automation-flow > header { display: flex; min-height: 92px; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 25px; border-bottom: 1px solid #e5e7ea; background: rgba(255,255,255,.94); }.automation-flow > header span { display: grid; gap: 4px; }.automation-flow > header small { color: #9298a1; font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }.automation-flow > header h3 { margin: 0; font-size: 16px; }.automation-flow > header .feature-primary { width: 155px; min-height: 42px; font-size: 9px; }
.automation-nodes { display: grid; width: min(600px,86%); margin: 35px auto; justify-items: center; }.automation-nodes > b { height: 23px; color: #9ba1a9; font-size: 13px; font-weight: 400; }.automation-nodes article { display: grid; width: 100%; grid-template-columns: 44px 1fr; align-items: center; gap: 13px; padding: 14px 18px; border: 1px solid #dfe3e7; border-left: 5px solid #27313b; border-radius: 15px; background: rgba(255,255,255,.96); box-shadow: 0 11px 28px rgba(29,29,31,.05); transition: border .3s ease,transform .3s ease,box-shadow .3s ease; }.automation-nodes article:nth-of-type(2) { border-left-color: #d69a3e; }.automation-nodes article:nth-of-type(4) { border-left-color: #55906c; }.automation-nodes article > i { display: grid; width: 42px; height: 42px; color: #526b84; border-radius: 12px; background: #eaf0f6; font-size: 10px; font-style: normal; place-items: center; }.automation-nodes article span { display: grid; gap: 3px; }.automation-nodes small { color: #9298a1; font-size: 7px; text-transform: uppercase; letter-spacing: .07em; }.automation-nodes article b { font-size: 10px; }.automation-nodes article em { color: #9ba0a8; font-size: 6px; font-style: normal; }.automation-nodes article.is-running { border-color: #8ba9c7; border-left-color: #496f99; box-shadow: 0 14px 38px rgba(65,101,141,.13); transform: scale(1.015); }.automation-nodes article.is-done { border-left-color: #4c906b; }.automation-nodes article.is-done > i { color: #fff; background: #4c906b; }
.automation-log { padding: 26px 18px; border-left: 1px solid #e4e6e9; background: #fafafb; }.automation-log h3 { margin: 12px 0 27px; font-size: 18px; line-height: 1.2; }.automation-log ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }.automation-log li { position: relative; display: flex; min-height: 67px; gap: 10px; color: #8e949d; font-size: 8px; line-height: 1.45; }.automation-log li:not(:last-child)::after { position: absolute; top: 14px; bottom: 0; left: 4px; width: 1px; background: #dadddf; content: ""; }.automation-log li i { position: relative; z-index: 1; width: 9px; height: 9px; margin-top: 3px; border: 2px solid #fff; border-radius: 50%; background: #4b8b64; box-shadow: 0 0 0 1px #9bc3aa; }.automation-log li.is-new { color: #303841; }

/* Analytics workspace */
.analytics-toolbar { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 20px; padding: 0 24px; border-bottom: 1px solid #e5e7ea; }.analytics-toolbar > div { display: flex; gap: 5px; }.analytics-toolbar button { padding: 8px 11px; color: #717780; border: 1px solid #dfe2e6; border-radius: 9px; background: #fff; font-size: 8px; font-weight: 650; cursor: pointer; }.analytics-toolbar button.is-active { color: #fff; border-color: #20252b; background: #20252b; }.analytics-toolbar span { color: #9298a1; font-size: 8px; }
.analytics-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; padding: 20px 24px 0; }.analytics-metrics article { padding: 18px; border: 1px solid #e1e4e7; border-radius: 16px; background: #fafafb; }.analytics-metrics small { color: #8f959e; font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }.analytics-metrics strong { display: block; margin: 13px 0 7px; font-size: clamp(27px,2.8vw,42px); font-weight: 600; letter-spacing: -.055em; }.analytics-metrics span { color: #818892; font-size: 7px; }
.analytics-main { display: grid; min-height: 460px; grid-template-columns: 1fr 310px; gap: 15px; padding: 15px 24px 24px; }.analytics-main > * { border: 1px solid #e1e4e7; border-radius: 17px; background: #fff; }.analytics-chart { padding: 23px; }.analytics-chart header { display: flex; align-items: start; justify-content: space-between; }.analytics-chart header span { display: grid; gap: 5px; }.analytics-chart header small { color: #9197a0; font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }.analytics-chart h3 { margin: 0; font-size: 19px; }.analytics-chart header em { color: #8e949c; font-size: 7px; font-style: normal; }.analytics-bars { display: flex; height: 285px; align-items: end; gap: clamp(7px,1.2vw,15px); padding: 35px 10px 10px; border-bottom: 1px solid #dfe3e7; background: repeating-linear-gradient(to bottom,transparent 0,transparent 70px,#eef0f2 71px); }.analytics-bars i { flex: 1; height: var(--h); border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg,#557ca6,#a9bbce); transition: height .55s cubic-bezier(.2,.8,.2,1); }.analytics-bars i:nth-last-child(-n+3) { background: linear-gradient(180deg,#4f8060,#a9c2b1); }.analytics-chart footer { display: flex; justify-content: space-between; padding-top: 10px; color: #969ba3; font-size: 7px; }
.analytics-breakdown { padding: 23px; background: #fafafb; }.analytics-breakdown h3 { margin: 7px 0 31px; font-size: 19px; }.analytics-breakdown > div { display: grid; gap: 8px; margin-bottom: 25px; }.analytics-breakdown > div > span { height: 7px; border-radius: 99px; background: #e6e8eb; overflow: hidden; }.analytics-breakdown > div > span i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: #55799f; }.analytics-breakdown > div:nth-of-type(2) > span i { background: #6c8a74; }.analytics-breakdown > div:nth-of-type(3) > span i { background: #81728b; }.analytics-breakdown > div:nth-of-type(4) > span i { background: #aaaeb4; }.analytics-breakdown b { display: flex; justify-content: space-between; color: #656c75; font-size: 8px; }.analytics-breakdown em { color: #20252b; font-style: normal; }

/* Proof section shared by the four capability pages. */
.feature-proof-section { padding: 30px 5vw 140px; background: #fff; }.feature-proof-section .section-inner { width: min(1240px,92vw); }.feature-proof-section .section-heading { display: flex; max-width: none; align-items: end; justify-content: space-between; gap: 60px; }.feature-proof-section .section-heading h2 { max-width: 800px; }.feature-proof-section .section-heading > p { width: min(400px,34vw); margin: 0 0 5px; color: #7a7a80; font-size: 15px; line-height: 1.5; }
.feature-proof-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; margin-top: 65px; }.feature-proof-card { position: relative; min-height: 430px; padding: 29px; border: 1px solid rgba(29,29,31,.055); border-radius: 30px; background: #f4f5f7; overflow: hidden; }.feature-proof-card:nth-child(2) { background: #eef3f1; }.feature-proof-card:nth-child(3) { background: #f3eff4; }.feature-proof-card > span { color: #5d7693; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }.feature-proof-card h3 { max-width: 330px; margin: 72px 0 12px; font-size: clamp(25px,2.2vw,34px); line-height: 1; letter-spacing: -.045em; }.feature-proof-card > p { max-width: 340px; margin: 0; color: #7b7b81; font-size: 13px; line-height: 1.5; }
.feature-proof-mini { position: absolute; right: 22px; bottom: 22px; left: 22px; min-height: 90px; padding: 16px; border: 1px solid rgba(29,29,31,.07); border-radius: 16px; background: rgba(255,255,255,.82); box-shadow: 0 16px 38px rgba(29,29,31,.055); }.source-mini,.flow-mini,.trace-mini,.relation-mini { display: flex; align-items: center; justify-content: center; gap: 10px; }.source-mini b,.flow-mini b,.trace-mini b,.relation-mini b { padding: 8px 10px; color: #68717a; border-radius: 9px; background: #f1f3f5; font-size: 7px; }.source-mini i,.flow-mini i,.trace-mini i,.relation-mini i { width: 17px; height: 1px; background: #bfc5cb; }.source-mini strong,.flow-mini strong,.trace-mini strong,.relation-mini strong { padding: 8px 10px; color: #fff; border-radius: 9px; background: #293440; font-size: 7px; }.approval-mini,.wait-mini,.consent-mini { display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 4px 10px; }.approval-mini small,.wait-mini small,.consent-mini small { color: #969ba3; font-size: 7px; }.approval-mini strong,.wait-mini strong,.consent-mini strong { font-size: 11px; }.approval-mini em,.wait-mini em,.consent-mini em { grid-row: 1 / 3; grid-column: 2; display: grid; width: 36px; height: 36px; align-self: center; color: #4f8060; border-radius: 11px; background: #e8f2eb; font-size: 13px; font-style: normal; place-items: center; }.handoff-mini,.metric-mini,.health-mini { display: flex; align-items: center; gap: 12px; }.handoff-mini > i,.identity-nodes > i { display: grid; width: 37px; height: 37px; color: #526d8b; border-radius: 11px; background: #e9f0f7; font-size: 8px; font-style: normal; place-items: center; }.handoff-mini span,.health-mini span { display: grid; gap: 4px; }.handoff-mini small,.health-mini small,.metric-mini span { color: #969ba3; font-size: 7px; }.handoff-mini b,.health-mini b { font-size: 10px; }.handoff-mini em { margin-left: auto; color: #617184; font-style: normal; }.identity-nodes { display: flex; align-items: center; justify-content: center; gap: 7px; }.identity-nodes strong { display: grid; width: 45px; height: 45px; margin-left: 8px; color: #fff; border-radius: 14px; background: #5f5069; font-size: 9px; place-items: center; }.metric-mini strong { font-size: 32px; letter-spacing: -.05em; }.metric-mini em { margin-left: auto; color: #4f8060; font-size: 9px; font-style: normal; }.health-mini > i { width: 12px; height: 12px; border: 4px solid #dce8df; border-top-color: #4f8060; border-radius: 50%; }.audit-mini { display: grid; grid-template-columns: 10px 1fr 10px 1fr; align-items: center; gap: 8px; }.audit-mini > i { width: 8px; height: 8px; border-radius: 50%; background: #4c7ca9; }.audit-mini span { display: grid; gap: 3px; }.audit-mini b { font-size: 8px; }.audit-mini small { color: #969ba3; font-size: 6px; }

@media (max-width: 1120px) {
  .ai-live-grid,.identity-live-grid { grid-template-columns: 1fr 1.2fr; }.ai-evidence-pane,.identity-history-pane { display: none; }
  .automation-live-canvas { grid-template-columns: 220px 1fr; }.automation-log { display: none; }
  .analytics-main { grid-template-columns: 1fr 270px; }
}
@media (max-width: 820px) {
  .feature-showcase { width: calc(100% - 16px); margin-bottom: 70px; padding: 25px 9px 9px; border-radius: 28px; }.feature-showcase-heading { display: block; padding: 0 9px; }.feature-showcase-heading > p { width: auto; margin-top: 14px; }.feature-workspace { border-radius: 19px; }
  .ai-live-grid,.identity-live-grid { grid-template-columns: 1fr; min-height: auto; }.ai-request-pane,.identity-profile-pane { display: none; }.ai-trace-pane,.identity-source-pane { min-height: 610px; border: 0; }
  .automation-live-canvas { grid-template-columns: 1fr; min-height: auto; }.automation-list { display: none; }.automation-flow > header { align-items: stretch; flex-direction: column; }.automation-flow > header .feature-primary { width: 100%; }.automation-nodes { width: calc(100% - 30px); }
  .analytics-metrics { grid-template-columns: 1fr 1fr; }.analytics-main { grid-template-columns: 1fr; }.analytics-breakdown { display: none; }
  .feature-proof-section { padding-inline: 4vw; }.feature-proof-section .section-inner { width: 100%; }.feature-proof-section .section-heading { display: block; }.feature-proof-section .section-heading > p { width: auto; margin-top: 18px; }.feature-proof-grid { grid-template-columns: 1fr; margin-top: 45px; }.feature-proof-card { min-height: 420px; }
}
@media (max-width: 560px) {
  .product-family-transition .inbox-family-copy strong { font-size: 42px; }.product-family-transition .inbox-family-copy small { font-size: 8px; }
  .analytics-metrics { grid-template-columns: 1fr; }.analytics-metrics article:nth-child(n+3) { display: none; }.analytics-bars { height: 230px; gap: 5px; }.fw-browser-bar > b { display: none; }.fw-status { gap: 10px; }.fw-status > b { display: none; }.feature-film-controls { grid-template-columns: 1fr 32px; }.feature-film-controls > div,.feature-film-controls time { display: none; }
}

/* Solutions overview: five distinct, live micro-scenes. */
.solution-overview-hero { min-height: 730px; }
.solution-overview-hero::before { inset: 12% 7%; background: radial-gradient(circle at 50% 56%, rgba(61,105,155,.055), transparent 60%); }
.solution-studio { width: min(1440px, calc(100% - 32px)); margin: -34px auto 120px; padding: clamp(34px,4vw,64px); border: 1px solid rgba(29,29,31,.085); border-radius: 42px; background: #fff; box-shadow: 0 42px 120px rgba(29,29,31,.09); overflow: hidden; }
.solution-studio-heading { display: flex; max-width: 1240px; margin: 0 auto 42px; align-items: end; justify-content: space-between; gap: 40px; }
.solution-studio-heading small { display: block; margin-bottom: 13px; color: #456b96; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.solution-studio-heading h2 { margin: 0; font-size: clamp(42px,5.3vw,78px); font-weight: 640; line-height: .92; letter-spacing: -.062em; }
.solution-studio-heading h2 span { color: #6c6c72; }
.solution-studio-heading > p { width: min(410px,34vw); margin: 0; color: #77777d; font-size: 15px; line-height: 1.55; }
.solution-studio-shell { display: grid; grid-template-columns: 285px minmax(0,1fr); max-width: 1240px; min-height: 620px; margin: 0 auto; border: 1px solid #dedee2; border-radius: 28px; background: #f7f7f9; box-shadow: 0 28px 80px rgba(29,29,31,.1); overflow: hidden; }
.solution-studio-nav { display: flex; padding: 14px; border-right: 1px solid #e1e1e4; background: #f1f1f3; flex-direction: column; gap: 6px; }
.solution-studio-nav button { display: grid; grid-template-columns: 36px minmax(0,1fr) 18px; min-height: 92px; padding: 14px 12px; align-items: center; gap: 11px; color: #77777d; border: 1px solid transparent; border-radius: 16px; text-align: left; background: transparent; cursor: pointer; transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.solution-studio-nav button:hover { color: #1d1d1f; transform: translateX(2px); }
.solution-studio-nav button.is-active { color: #1d1d1f; border-color: #dddde1; background: #fff; box-shadow: 0 12px 32px rgba(29,29,31,.075); }
.solution-studio-nav button > i { display: grid; width: 36px; height: 36px; color: #4d6d91; border-radius: 11px; background: #e8eef5; font-size: 9px; font-style: normal; place-items: center; }
.solution-studio-nav button:nth-child(2) > i { color: #665780; background: #eeeaf2; }.solution-studio-nav button:nth-child(3) > i { color: #537363; background: #e8efeb; }.solution-studio-nav button:nth-child(4) > i { color: #926b27; background: #f3ecdd; }.solution-studio-nav button:nth-child(5) > i { color: #44454b; background: #e7e7e9; }
.solution-studio-nav span { display: grid; min-width: 0; gap: 5px; }.solution-studio-nav b { font-size: 12px; letter-spacing: -.018em; }.solution-studio-nav small { overflow: hidden; color: #99999f; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.solution-studio-nav em { color: #adadb2; font-size: 13px; font-style: normal; }
.solution-stage { position: relative; min-height: 620px; background: #fff; overflow: hidden; }
.solution-window-bar { position: relative; z-index: 20; display: flex; height: 46px; align-items: center; gap: 13px; padding: 0 17px; color: #8d8d93; border-bottom: 1px solid #e7e7e9; background: rgba(255,255,255,.88); backdrop-filter: blur(18px); font-size: 9px; }
.solution-window-bar > span { display: flex; gap: 5px; }.solution-window-bar > span i { width: 7px; height: 7px; border-radius: 50%; background: #d0d0d4; }.solution-window-bar b { font-weight: 600; }.solution-window-bar em { display: flex; margin-left: auto; align-items: center; gap: 6px; color: #557966; font-style: normal; }.solution-window-bar em i { width: 6px; height: 6px; border-radius: 50%; background: #36a56f; box-shadow: 0 0 0 4px rgba(54,165,111,.1); }
.solution-scene { position: absolute; z-index: 1; inset: 46px 0 4px; opacity: 0; pointer-events: none; transform: translateY(14px) scale(.99); transition: opacity .45s ease, transform .55s cubic-bezier(.22,.8,.25,1); overflow: hidden; }
.solution-scene[hidden] { display: block; }.solution-scene.is-active { z-index: 2; opacity: 1; pointer-events: auto; transform: none; }
.solution-scene::before { position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(64,86,112,.09) 1px, transparent 0); background-size: 20px 20px; content: ""; mask-image: linear-gradient(90deg,transparent 2%,#000 22%,#000 78%,transparent 98%); }
.scene-float-card { position: absolute; z-index: 3; border: 1px solid rgba(29,29,31,.095); border-radius: 18px; background: rgba(255,255,255,.95); box-shadow: 0 22px 50px rgba(29,29,31,.11); }
.scene-float-card small { display: block; color: #929298; font-size: 8px; }.scene-float-card strong { display: block; color: #26262a; letter-spacing: -.025em; }.scene-float-card span,.scene-float-card em { color: #8c8c92; font-size: 8px; font-style: normal; }
.scene-link { position: absolute; z-index: 8; right: 22px; bottom: 18px; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 15px; border: 1px solid #e1e1e4; border-radius: 999px; color: #515156; background: rgba(255,255,255,.92); box-shadow: 0 10px 26px rgba(29,29,31,.07); font-size: 9px; font-weight: 650; backdrop-filter: blur(14px); }.scene-link span { display: grid; width: 24px; height: 24px; color: #fff; border-radius: 50%; background: #242529; place-items: center; }.scene-link:hover span { transform: translateX(2px); }
.solution-film-line { position: absolute; z-index: 24; right: 0; bottom: 0; left: 0; height: 4px; background: #eeeeef; }.solution-film-line i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#426d9e,#76658c); }.solution-film-line i.is-running { animation: solutionProgress 5.8s linear both; }@keyframes solutionProgress { to { width: 100%; } }

/* Appointment scene */
.scene-appointments { background: linear-gradient(145deg,#f7fafc 0%,#fff 56%,#f7f4fa 100%); }
.appointment-request { top: 76px; left: 6%; width: 210px; padding: 18px; transform: rotate(-2.5deg); }.appointment-request strong { margin: 10px 0 20px; font-size: 15px; line-height: 1.25; }
.appointment-calendar { position: absolute; z-index: 4; top: 82px; left: 50%; width: 410px; padding: 20px; border: 1px solid #dfe3e8; border-radius: 22px; background: #fff; box-shadow: 0 26px 70px rgba(44,61,82,.13); transform: translateX(-50%); }.appointment-calendar header { display: flex; align-items: start; justify-content: space-between; }.appointment-calendar header span { display: grid; gap: 3px; }.appointment-calendar header small,.appointment-calendar header em { color: #99999f; font-size: 8px; font-style: normal; }.appointment-calendar header b { font-size: 14px; }
.calendar-slots { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 24px 0; }.calendar-slots span { display: grid; padding: 12px 5px; gap: 5px; border: 1px solid #e2e2e5; border-radius: 12px; text-align: center; background: #f7f7f8; }.calendar-slots time { color: #67676c; font-size: 11px; }.calendar-slots i { color: #a0a0a5; font-size: 7px; font-style: normal; }.calendar-slots .is-selected { color: #345f91; border-color: #a8bfd8; background: #edf4fb; animation: appointmentSlot 2.8s ease-in-out infinite; }.calendar-slots .is-selected time,.calendar-slots .is-selected i { color: inherit; }
@keyframes appointmentSlot { 50% { box-shadow: 0 0 0 5px rgba(64,110,160,.08); transform: translateY(-2px); } }
.appointment-calendar footer { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid #ececef; }.appointment-calendar footer > i { width: 9px; height: 9px; border-radius: 50%; background: #d99d36; box-shadow: 0 0 0 5px rgba(217,157,54,.1); }.appointment-calendar footer span { display: grid; gap: 3px; }.appointment-calendar footer b { font-size: 9px; }.appointment-calendar footer small { color: #98989e; font-size: 7px; }
.appointment-result { right: 5%; bottom: 94px; display: flex; width: 220px; padding: 15px; align-items: center; gap: 11px; transform: rotate(2deg); }.appointment-result > i { display: grid; width: 35px; height: 35px; color: #fff; border-radius: 11px; background: #4e8a69; font-style: normal; place-items: center; }.appointment-result span { display: grid; gap: 3px; }.appointment-result strong { font-size: 11px; }

/* Qualification scene */
.scene-qualification { background: radial-gradient(circle at 52% 46%,rgba(113,91,137,.12),transparent 38%),#fcfbfd; }.qualification-message { top: 78px; left: 6%; padding: 18px; transform: rotate(-2deg); }.qualification-message strong { margin-top: 9px; font-size: 14px; line-height: 1.3; }
.signal-field { position: absolute; top: 45px; left: 50%; width: 480px; height: 420px; transform: translateX(-50%); }.signal-field::before,.signal-field::after { position: absolute; top: 50%; left: 50%; width: 260px; height: 260px; border: 1px dashed rgba(99,81,122,.18); border-radius: 50%; content: ""; transform: translate(-50%,-50%); }.signal-field::after { width: 360px; height: 360px; }
.signal { position: absolute; z-index: 2; padding: 9px 12px; color: #665775; border: 1px solid #ddd4e5; border-radius: 999px; background: #fff; box-shadow: 0 12px 28px rgba(71,54,86,.1); font-size: 8px; animation: signalOrbit 4.4s ease-in-out infinite alternate; }.signal-one { top: 42px; left: 174px; }.signal-two { top: 176px; right: 0; animation-delay: -.8s; }.signal-three { bottom: 45px; left: 175px; animation-delay: -1.6s; }.signal-four { top: 176px; left: 0; animation-delay: -2.4s; }@keyframes signalOrbit { to { transform: translateY(-8px) scale(1.025); } }
.score-core { position: absolute; z-index: 4; top: 50%; left: 50%; display: grid; width: 150px; height: 150px; align-content: center; border: 1px solid #d9d0e2; border-radius: 50%; text-align: center; background: #fff; box-shadow: 0 24px 60px rgba(82,62,100,.16); transform: translate(-50%,-50%); }.score-core small { color: #91849b; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }.score-core strong { margin: 3px 0; font-size: 45px; letter-spacing: -.07em; }.score-core i { color: #5e7c68; font-size: 8px; font-style: normal; }
.qualification-result { right: 5%; bottom: 76px; padding: 16px 18px; transform: rotate(2deg); }.qualification-result strong { margin: 7px 0 4px; font-size: 12px; }

/* Support scene */
.scene-support { background: linear-gradient(135deg,#fafcfb,#fff 52%,#f7f9fc); }.support-question { top: 74px; left: 5%; padding: 18px; transform: rotate(-2deg); }.support-question strong { margin-top: 9px; font-size: 14px; line-height: 1.3; }
.support-sources { position: absolute; z-index: 4; top: 68px; left: 50%; width: 390px; padding: 18px; border: 1px solid #dbe4df; border-radius: 22px; background: #fff; box-shadow: 0 26px 65px rgba(47,75,60,.13); transform: translateX(-50%); }.support-sources header { display: flex; margin-bottom: 14px; justify-content: space-between; color: #85858b; font-size: 8px; }.support-sources header b { color: #527662; }.support-sources > div { display: grid; grid-template-columns: 31px 1fr 24px; padding: 11px 8px; align-items: center; gap: 9px; border-top: 1px solid #efeff0; }.support-sources > div > i { display: grid; width: 29px; height: 29px; color: #587568; border-radius: 9px; background: #eaf1ed; font-size: 7px; font-style: normal; place-items: center; }.support-sources span { display: grid; gap: 3px; }.support-sources strong { font-size: 9px; }.support-sources small { color: #98989e; font-size: 7px; }.support-sources em { display: grid; width: 22px; height: 22px; color: #568169; border-radius: 50%; background: #edf4f0; font-size: 8px; font-style: normal; place-items: center; }.support-sources .is-gated { border: 1px solid #ead9b8; border-radius: 12px; background: #fbf7ee; }.support-sources .is-gated > i,.support-sources .is-gated em { color: #996e24; background: #f1e5ce; animation: supportGate 1.5s ease-in-out infinite alternate; }@keyframes supportGate { to { transform: scale(1.08); } }
.handoff-card { right: 5%; bottom: 80px; display: flex; padding: 15px; align-items: center; gap: 10px; transform: rotate(2deg); }.handoff-card > i { display: grid; width: 38px; height: 38px; color: #3d5f86; border-radius: 12px; background: #e6eef7; font-size: 9px; font-style: normal; place-items: center; }.handoff-card span { display: grid; gap: 3px; }.handoff-card strong { font-size: 11px; }

/* Follow-up scene */
.scene-followups { background: radial-gradient(circle at 73% 34%,rgba(216,159,57,.12),transparent 31%),#fffdfa; }.followup-thread { position: absolute; z-index: 3; top: 75px; left: 7%; width: 54%; }.followup-bubble { width: fit-content; max-width: 75%; padding: 15px 17px; color: #505056; border-radius: 17px 17px 17px 5px; background: #f1f1f3; font-size: 11px; line-height: 1.4; }.followup-bubble time { display: block; margin-top: 8px; color: #97979d; font-size: 7px; }.followup-bubble.is-agent { margin-left: auto; color: #fff; border-radius: 17px 17px 5px 17px; background: #292a2e; animation: followupWake 3s ease-in-out infinite; }.followup-bubble.is-agent time { color: #bdbdc1; }@keyframes followupWake { 0%,55%,100% { transform: none; } 68% { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(29,29,31,.17); } }
.followup-wait { display: flex; margin: 24px 8%; align-items: center; gap: 10px; color: #a07730; font-size: 8px; }.followup-wait i { height: 1px; background: #e5d4b4; flex: 1; }
.followup-clock { position: absolute; z-index: 3; top: 68px; right: 8%; display: grid; width: 160px; height: 160px; align-content: center; justify-items: center; border: 1px solid #ead9b9; border-radius: 50%; background: #fff; box-shadow: 0 24px 60px rgba(112,80,27,.11); }.followup-clock > span { position: absolute; top: 34px; left: 50%; width: 2px; height: 46px; border-radius: 99px; background: #ba8730; transform-origin: 50% 46px; animation: followupHand 5.8s linear infinite; }.followup-clock > i { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: #ba8730; transform: translate(-50%,-50%); }@keyframes followupHand { to { transform: rotate(360deg); } }.followup-clock b { margin-top: 52px; font-size: 11px; }.followup-clock small { width: 110px; margin-top: 4px; color: #99999f; text-align: center; font-size: 7px; }
.followup-result { right: 6%; bottom: 76px; padding: 15px 18px; }.followup-result strong { margin: 7px 0; font-size: 12px; }.followup-result span b { color: #5d806b; font-size: 14px; }

/* Operations scene */
.scene-operations { background: radial-gradient(circle at 50% 46%,rgba(52,74,101,.09),transparent 34%),#fbfcfd; }.operation-map { position: absolute; top: 35px; left: 50%; width: 700px; height: 420px; transform: translateX(-50%); }.operation-map svg { position: absolute; top: 35px; left: 0; width: 100%; height: 330px; fill: none; stroke: #b6c2ce; stroke-width: 1.5; stroke-dasharray: 5 7; }.operation-map svg path { animation: operationLine 8s linear infinite; }@keyframes operationLine { to { stroke-dashoffset: -120; } }
.channel-node { position: absolute; z-index: 3; display: grid; min-width: 92px; padding: 12px; gap: 3px; color: #4f5660; border: 1px solid #dde2e7; border-radius: 14px; text-align: center; background: #fff; box-shadow: 0 15px 35px rgba(37,52,69,.09); font-size: 9px; font-weight: 650; }.channel-node small { color: #9a9fa5; font-size: 7px; font-weight: 500; }.channel-web { top: 33px; left: 15px; }.channel-whatsapp { bottom: 36px; left: 5px; }.channel-instagram { top: 28px; right: 8px; }.channel-email { right: 0; bottom: 32px; }
.operations-core { position: absolute; z-index: 4; top: 50%; left: 50%; display: grid; width: 200px; height: 200px; align-content: center; justify-items: center; border: 1px solid #cfd8e1; border-radius: 50%; background: #fff; box-shadow: 0 30px 75px rgba(40,58,79,.16); transform: translate(-50%,-50%); }.operations-core small { color: #7f8994; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }.operations-core strong { margin: 5px 0 -2px; font-size: 50px; letter-spacing: -.07em; }.operations-core span { color: #8f969d; font-size: 8px; }.operations-core i { margin-top: 12px; padding: 5px 8px; color: #4d7b62; border-radius: 99px; background: #eaf3ee; font-size: 7px; font-style: normal; }
.audit-output { right: 5%; bottom: 70px; padding: 15px 18px; transform: rotate(1.5deg); }.audit-output strong { margin: 7px 0 8px; font-size: 12px; }.audit-output span i { color: #4e8164; font-style: normal; }
.solution-principles { padding-top: 150px; }
.solution-principle-grid { gap: 16px; }
.solution-principle-card { position: relative; display: flex; min-height: 575px; flex-direction: column; padding: 24px; border: 1px solid rgba(29,29,31,.055); box-shadow: inset 0 1px 0 rgba(255,255,255,.82); overflow: hidden; transition: transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease; }
.solution-principle-card:hover { transform: translateY(-6px); box-shadow: 0 28px 70px rgba(29,29,31,.1),inset 0 1px 0 #fff; }
.solution-principle-card > .principle-number { display: grid; width: 38px; height: 38px; color: #355c8a; border: 1px solid rgba(29,29,31,.045); border-radius: 12px; background: rgba(255,255,255,.9); font-size: 11px; font-weight: 650; place-items: center; }
.solution-principle-card h3 { margin: 24px 0 8px; font-size: 25px; }.solution-principle-card > p { min-height: 66px; font-size: 14px; }
.principle-ui { height: 300px; margin-top: auto; padding: 14px; border: 1px solid rgba(29,29,31,.08); border-radius: 20px; background: rgba(255,255,255,.8); box-shadow: 0 18px 45px rgba(29,29,31,.06); overflow: hidden; }
.principle-ui span { display: initial; width: auto; height: auto; color: inherit; border-radius: 0; background: none; }
.principle-ui header,.principle-ui footer { display: flex; align-items: center; justify-content: space-between; }.principle-ui header { height: 37px; padding-bottom: 10px; color: #85858b; border-bottom: 1px solid rgba(29,29,31,.075); font-size: 7px; }.principle-ui header b { color: #556b84; font-size: 6px; text-transform: uppercase; letter-spacing: .08em; }

.decision-map { position: relative; height: 174px; padding-top: 13px; }.decision-input { display: grid !important; width: 158px !important; margin: 0 auto; padding: 9px 10px; grid-template-columns: 25px 1fr; column-gap: 8px; border: 1px solid #e0e4e8; border-radius: 11px !important; background: #fff !important; box-shadow: 0 9px 22px rgba(36,52,69,.07); }.decision-input > i { display: grid; grid-row: 1/3; width: 25px; height: 25px; color: #fff; border-radius: 8px; background: #315f91; font-size: 8px; font-style: normal; place-items: center; }.decision-input b { font-size: 7px; }.decision-input small { color: #969ba2; font-size: 5.5px; }.decision-line { display: block; width: 1px; height: 22px; margin: 0 auto; background: #b7c3cf; }.decision-branches { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }.decision-branches::before { position: absolute; top: -1px; right: 16%; left: 16%; height: 1px; background: #b7c3cf; content: ""; }.decision-branches > span { position: relative; display: grid !important; padding: 10px 5px 8px; justify-items: center; gap: 3px; border: 1px solid #e1e5e8; border-radius: 11px !important; text-align: center; background: #fff !important; transition: transform .3s ease,box-shadow .3s ease; }.decision-branches > span::before { position: absolute; top: -8px; left: 50%; width: 1px; height: 8px; background: #b7c3cf; content: ""; }.decision-branches i { display: grid; width: 25px; height: 25px; color: #496c92; border-radius: 8px; background: #e8eef5; font-size: 7px; font-style: normal; place-items: center; }.decision-branches span:nth-child(2) i { color: #52745f; background: #e7f0ea; }.decision-branches span:nth-child(3) i { color: #8e692b; background: #f2e9d9; }.decision-branches b { font-size: 6.5px; }.decision-branches small { color: #999da3; font-size: 4.8px; }.principle-decision:hover .decision-branches span:nth-child(2) { box-shadow: 0 11px 24px rgba(48,83,65,.1); transform: translateY(-3px); }
.decision-ui footer { justify-content: center; gap: 6px; color: #777f88; font-size: 5.5px; }.decision-ui footer i { width: 6px; height: 6px; border-radius: 50%; background: #3a6c9d; animation: decisionPulse 1.4s ease-in-out infinite alternate; }@keyframes decisionPulse { to { box-shadow: 0 0 0 5px rgba(58,108,157,.1); } }

.result-ui header b { display: flex; align-items: center; gap: 5px; color: #527661; }.result-ui header b i { width: 6px; height: 6px; border-radius: 50%; background: #36a66f; box-shadow: 0 0 0 4px rgba(54,166,111,.1); }
.result-ui ol { display: grid; gap: 3px; margin: 10px 0 8px; padding: 0; list-style: none; }.result-ui li { display: grid; grid-template-columns: 27px 1fr 20px; min-height: 37px; padding: 6px 7px; align-items: center; gap: 8px; border-radius: 10px; background: #f7f8f9; opacity: .66; animation: resultStep 4.8s ease-in-out infinite; }.result-ui li:nth-child(2) { animation-delay: .55s; }.result-ui li:nth-child(3) { animation-delay: 1.1s; }.result-ui li:nth-child(4) { animation-delay: 1.65s; }.result-ui li > i { display: grid; width: 27px; height: 27px; color: #496985; border-radius: 8px; background: #e7edf3; font-size: 7px; font-style: normal; place-items: center; }.result-ui li span { display: grid; gap: 2px; }.result-ui li b { font-size: 7px; }.result-ui li small { color: #969ba2; font-size: 5.3px; }.result-ui li em { display: grid; width: 18px; height: 18px; color: #4e7f62; border-radius: 50%; background: #e7f2eb; font-size: 7px; font-style: normal; place-items: center; }@keyframes resultStep { 0%,22%,100% { opacity: .58; transform: none; } 8%,16% { opacity: 1; background: #fff; box-shadow: 0 8px 18px rgba(29,29,31,.07); transform: translateX(3px); } }
.result-ui footer { height: 29px; padding: 0 6px; }.result-ui footer > span { display: block; width: 80px; height: 3px; border-radius: 99px; background: #e0e3e5; overflow: hidden; }.result-ui footer > span i { display: block; width: 100%; height: 100%; border-radius: inherit; background: #4e8a67; animation: resultProgress 4.8s ease-in-out infinite; transform-origin: left; }@keyframes resultProgress { 0% { transform: scaleX(.05); } 75%,100% { transform: scaleX(1); } }.result-ui footer b { margin-left: auto; color: #4e7f62; font-size: 6px; }.result-ui footer strong { margin-left: 8px; font-size: 12px; }

.trust-ui header b { color: #527662; }.trust-ledger { display: grid; gap: 4px; margin: 10px 0; }.trust-ledger > span { display: grid !important; grid-template-columns: 28px 1fr auto; min-height: 38px; padding: 6px 8px; align-items: center; gap: 8px; border: 1px solid rgba(29,29,31,.055); border-radius: 10px !important; background: rgba(255,255,255,.7) !important; }.trust-ledger > span > i { display: grid; width: 28px; height: 28px; color: #537263; border-radius: 8px; background: #e7efe9; font-size: 7px; font-style: normal; place-items: center; }.trust-ledger span:nth-child(2) > i { color: #4e6f94; background: #e7edf5; }.trust-ledger span:nth-child(3) > i { color: #8a682d; background: #f2e9d9; }.trust-ledger span:nth-child(4) > i { color: #6f607d; background: #ede9f0; }.trust-ledger b { font-size: 7px; }.trust-ledger em { color: #64816f; font-size: 5.3px; font-style: normal; }.trust-ui footer { min-height: 37px; padding: 7px 8px; border-radius: 10px; background: #edf4f0; }.trust-ui footer > span { display: flex !important; align-items: center; gap: 6px; color: #4f755e; }.trust-ui footer > span i { display: grid; width: 20px; height: 20px; color: #fff; border-radius: 6px; background: #4e8463; font-size: 7px; font-style: normal; place-items: center; }.trust-ui footer b { font-size: 6.5px; }.trust-ui footer strong { color: #3f7154; font-size: 14px; letter-spacing: -.04em; }.principle-trust:hover .trust-ledger > span { animation: trustConfirm 1.2s ease both; }.principle-trust:hover .trust-ledger > span:nth-child(2) { animation-delay: .1s; }.principle-trust:hover .trust-ledger > span:nth-child(3) { animation-delay: .2s; }.principle-trust:hover .trust-ledger > span:nth-child(4) { animation-delay: .3s; }@keyframes trustConfirm { 50% { transform: translateX(3px); } }
.trust-ledger { gap: 3px; margin: 8px 0; }

/* Editorial character bento — the illustration explains the same job as the live UI. */
.solution-principle-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(370px,auto)); gap: 18px; }
.solution-principle-card { min-height: 0; padding: 28px; }
.principle-decision { grid-column: span 4; grid-row: span 2; min-height: 758px; background: #dfe8f3; }
.principle-result,.principle-trust { display: grid; min-height: 370px; grid-column: span 8; grid-template-columns: minmax(190px,1fr) 150px 300px; grid-template-rows: auto auto 1fr; column-gap: 20px; align-items: start; }
.principle-result { background: #e7ece6; }.principle-trust { background: #eee7ee; }
.principle-result > .principle-number,.principle-trust > .principle-number { grid-column: 1; grid-row: 1; }
.principle-result > h3,.principle-trust > h3 { grid-column: 1; grid-row: 2; align-self: end; }
.principle-result > p,.principle-trust > p { grid-column: 1; grid-row: 3; min-height: 0; }
.principle-result > .principle-ui,.principle-trust > .principle-ui { width: 100%; height: 300px; margin: 7px 0 0; grid-column: 3; grid-row: 1 / 4; align-self: center; }
.principle-character { position: relative; width: 150px; height: 225px; margin: 0; overflow: hidden; align-self: center; justify-self: center; pointer-events: none; }
.principle-character img { position: absolute; top: 0; width: 300%; height: 100%; max-width: none; object-fit: fill; filter: drop-shadow(0 14px 13px rgba(29,29,31,.08)); will-change: transform; }
.principle-decision > .principle-character { width: 190px; height: 285px; margin: -18px auto -12px; flex: 0 0 auto; }
.principle-decision > .principle-character img { left: 0; }
.principle-result > .principle-character { grid-column: 2; grid-row: 1 / 4; }.principle-result > .principle-character img { left: -100%; }
.principle-trust > .principle-character { grid-column: 2; grid-row: 1 / 4; }.principle-trust > .principle-character img { left: -200%; }
.solution-principle-card:hover .principle-character img { animation: principleCharacterHello .75s cubic-bezier(.2,.8,.2,1) both; }
@keyframes principleCharacterHello { 0%,100% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-10px) rotate(-1.2deg); } 72% { transform: translateY(-3px) rotate(.6deg); } }

@media (max-width: 1040px) {
  .solution-studio { padding: 34px 22px; }.solution-studio-shell { grid-template-columns: 220px minmax(0,1fr); }.solution-studio-nav button { grid-template-columns: 32px minmax(0,1fr); }.solution-studio-nav em { display: none; }.solution-studio-nav button > i { width: 32px; height: 32px; }
  .appointment-request,.qualification-message,.support-question { left: 3%; }.appointment-result,.qualification-result,.handoff-card,.followup-result,.audit-output { right: 3%; }.appointment-calendar,.support-sources { width: 360px; }.operation-map { width: 610px; }
  .solution-principle-grid { grid-template-columns: 1fr; grid-template-rows: none; }.principle-decision,.principle-result,.principle-trust { display: grid; min-height: 370px; grid-column: auto; grid-row: auto; grid-template-columns: minmax(190px,1fr) 150px 300px; grid-template-rows: auto auto 1fr; }.principle-decision > .principle-number { grid-column: 1; grid-row: 1; }.principle-decision > h3 { grid-column: 1; grid-row: 2; align-self: end; }.principle-decision > p { grid-column: 1; grid-row: 3; min-height: 0; }.principle-decision > .principle-character { width: 150px; height: 225px; margin: 0; grid-column: 2; grid-row: 1 / 4; }.principle-decision > .principle-ui { width: 100%; height: 300px; margin: 7px 0 0; grid-column: 3; grid-row: 1 / 4; align-self: center; }
}
@media (max-width: 760px) {
  .solution-overview-hero { min-height: 650px; }.solution-studio { width: calc(100% - 16px); padding: 28px 8px 8px; border-radius: 28px; }.solution-studio-heading { display: block; padding: 0 12px; }.solution-studio-heading > p { width: auto; margin-top: 18px; }.solution-studio-shell { display: block; min-height: 610px; border-radius: 20px; }.solution-studio-nav { display: flex; padding: 8px; border-right: 0; border-bottom: 1px solid #e1e1e4; overflow-x: auto; flex-direction: row; scrollbar-width: none; }.solution-studio-nav button { grid-template-columns: 30px 1fr; min-width: 190px; min-height: 70px; padding: 10px; }.solution-studio-nav button > i { width: 30px; height: 30px; }.solution-studio-nav small { display: none; }.solution-stage { min-height: 510px; }.appointment-request,.qualification-message,.support-question { top: 40px; left: 4%; transform: scale(.86) rotate(-2deg); transform-origin: left top; }.appointment-calendar,.support-sources { top: 150px; width: calc(100% - 28px); }.appointment-result,.qualification-result,.handoff-card,.followup-result,.audit-output { right: 4%; bottom: 65px; transform: scale(.86); transform-origin: right bottom; }.signal-field { top: 56px; width: 390px; transform: translateX(-50%) scale(.82); transform-origin: center top; }.followup-thread { left: 5%; width: 90%; }.followup-clock { display: none; }.operation-map { top: 45px; width: 520px; transform: translateX(-50%) scale(.72); transform-origin: center top; }.scene-link { right: 12px; bottom: 12px; }
  .solution-principle-grid { grid-template-columns: 1fr; }.principle-decision,.principle-result,.principle-trust { display: flex; min-height: 690px; }.principle-decision > .principle-character,.principle-result > .principle-character,.principle-trust > .principle-character { width: 150px; height: 225px; margin: -20px auto -22px; }.principle-decision > .principle-ui,.principle-result > .principle-ui,.principle-trust > .principle-ui { width: 100%; height: 300px; margin-top: auto; }
}

/* Solution detail system — shared structure, page-specific character and live operation. */
.solution-detail-page { --detail-accent:#dfe8f3; --detail-accent-2:#edf3f8; --detail-strong:#355f8d; background:#fff; }
.detail-qualification { --detail-accent:#eee8f1; --detail-accent-2:#f5f0f6; --detail-strong:#745f85; }
.detail-support { --detail-accent:#e3ece5; --detail-accent-2:#eef4ef; --detail-strong:#567461; }
.detail-followups { --detail-accent:#f1e8dc; --detail-accent-2:#f7f1e8; --detail-strong:#866831; }
.detail-operations { --detail-accent:#e2e7f0; --detail-accent-2:#edf0f6; --detail-strong:#516b91; }
.solution-detail-hero { display:grid; width:min(1320px,92vw); min-height:790px; margin:0 auto; padding:128px 0 80px; grid-template-columns:minmax(0,1.02fr) minmax(430px,.98fr); align-items:center; gap:44px; }
.solution-detail-copy { min-width:0; }
.solution-detail-copy h1 { margin:20px 0 28px; font-size:clamp(64px,6.8vw,108px); line-height:.89; letter-spacing:-.073em; }
.solution-detail-copy h1 span,.solution-detail-heading h2 span,.solution-detail-proof .section-heading h2 span { color:#707076; }
.solution-detail-copy .page-lead { max-width:690px; }
.solution-detail-copy .page-actions { justify-content:flex-start; }
.solution-family-scene { position:relative; display:grid; width:100%; min-height:455px; margin:0; padding:34px; place-items:center; border:1px solid rgba(29,29,31,.05); border-radius:44px; background:var(--detail-accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.85); overflow:hidden; }
.solution-family-scene::before { position:absolute; width:340px; height:340px; border:1px solid rgba(255,255,255,.7); border-radius:50%; content:""; box-shadow:0 0 0 70px rgba(255,255,255,.12),0 0 0 140px rgba(255,255,255,.08); }
.solution-family-scene img { position:relative; z-index:1; width:115%; max-width:none; height:auto; filter:drop-shadow(0 20px 18px rgba(29,29,31,.08)); animation:solutionFamilyArrive 1.35s cubic-bezier(.2,.85,.2,1) both; }
.detail-qualification .solution-family-scene img { width:108%; }
.detail-operations .solution-family-scene img { width:120%; }
@keyframes solutionFamilyArrive { 0% { opacity:0; transform:translateY(42px) scale(.94); } 62% { opacity:1; transform:translateY(-8px) scale(1.01); } 100% { opacity:1; transform:none; } }

.solution-detail-demo { padding:110px max(5vw,24px) 120px; background:#f5f5f7; }
.solution-detail-heading { display:flex; width:min(1320px,100%); margin:0 auto 48px; align-items:end; justify-content:space-between; gap:40px; }
.solution-detail-heading small { color:var(--detail-strong); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; }
.solution-detail-heading h2 { margin:15px 0 0; font-size:clamp(52px,5.7vw,88px); line-height:.92; letter-spacing:-.065em; }
.solution-detail-heading > p { width:390px; margin:0 0 7px; color:#6e6e73; font-size:16px; line-height:1.55; }
.solution-detail-window { width:min(1320px,100%); margin:0 auto; border:1px solid #dedee2; border-radius:34px; background:#fff; box-shadow:0 34px 100px rgba(29,29,31,.11); overflow:hidden; }
.solution-detail-window > .solution-window-bar { position:relative; z-index:7; }
.solution-detail-live-stage { min-height:680px; background:linear-gradient(180deg,#fff 0%,#fbfbfc 100%); overflow:hidden; }
.solution-detail-live-stage .solution-scene { bottom:44px; }
.solution-detail-live-stage .scene-float-card { box-shadow:0 20px 54px rgba(29,29,31,.12); }
.solution-detail-status { position:absolute; z-index:8; right:0; bottom:0; left:0; display:flex; height:44px; padding:0 22px; align-items:center; justify-content:space-between; color:#828289; border-top:1px solid #e4e4e7; background:rgba(255,255,255,.92); font-size:9px; backdrop-filter:blur(14px); }
.solution-detail-status span { display:flex; align-items:center; gap:8px; }.solution-detail-status span i { width:7px; height:7px; border-radius:50%; background:#35a36c; box-shadow:0 0 0 4px rgba(53,163,108,.1); }.solution-detail-status b { color:var(--detail-strong); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }

.solution-detail-proof { padding:150px 0 80px; }
.solution-detail-proof .section-heading { display:flex; align-items:end; justify-content:space-between; gap:50px; }
.solution-detail-proof .section-heading > p { width:390px; margin:0 0 10px; color:#707076; font-size:16px; line-height:1.55; }
.solution-detail-bento { display:grid; margin-top:70px; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(285px,auto)); gap:18px; }
.detail-proof-card { position:relative; display:flex; min-width:0; padding:30px; flex-direction:column; border:1px solid rgba(29,29,31,.05); border-radius:32px; background:var(--detail-accent-2); overflow:hidden; transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease; }
.detail-proof-card:hover { transform:translateY(-5px); box-shadow:0 25px 65px rgba(29,29,31,.08); }
.detail-proof-card.detail-proof-primary { grid-column:span 5; grid-row:span 2; background:var(--detail-accent); }
.detail-proof-card:not(.detail-proof-primary) { grid-column:span 7; }
.detail-proof-card > span { display:grid; width:40px; height:40px; color:var(--detail-strong); border-radius:13px; background:rgba(255,255,255,.82); font-size:11px; font-weight:700; place-items:center; }
.detail-proof-card h3 { margin:28px 0 9px; font-size:29px; letter-spacing:-.04em; }.detail-proof-card > p { max-width:570px; margin:0; color:#77777d; font-size:15px; line-height:1.5; }

.calendar-mini,.source-mini,.timing-mini,.hub-mini { margin-top:auto; padding:20px; border:1px solid rgba(29,29,31,.07); border-radius:22px; background:rgba(255,255,255,.82); box-shadow:0 18px 44px rgba(29,29,31,.06); }
.calendar-mini header,.calendar-mini footer { display:flex; align-items:center; justify-content:space-between; }.calendar-mini header b { font-size:13px; }.calendar-mini header small { color:#85858b; font-size:8px; }.calendar-mini > div { display:grid; height:180px; margin:18px 0 13px; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:7px; }.calendar-mini > div i { border-radius:11px; background:#eef0f2; }.calendar-mini > div i.busy { background:#dadde1; }.calendar-mini > div i.selected { background:var(--detail-strong); animation:detailPulse 1.5s ease-in-out infinite alternate; }.calendar-mini footer { color:#87878d; font-size:7px; }
@keyframes detailPulse { to { box-shadow:0 0 0 7px color-mix(in srgb,var(--detail-strong) 12%,transparent); } }
.approval-mini,.handoff-mini,.boundary-mini { display:flex; margin-top:auto; padding:18px; align-items:center; gap:13px; border:1px solid rgba(29,29,31,.07); border-radius:18px; background:rgba(255,255,255,.86); box-shadow:0 14px 35px rgba(29,29,31,.06); }.approval-mini > i,.handoff-mini > i,.boundary-mini > i { display:grid; width:42px; height:42px; flex:0 0 auto; color:#fff; border-radius:13px; background:var(--detail-strong); font-size:13px; font-style:normal; font-weight:700; place-items:center; }.approval-mini > span,.handoff-mini > span,.boundary-mini > span { display:grid; gap:4px; }.approval-mini small,.handoff-mini small,.boundary-mini small { color:#8c8c92; font-size:7px; }.approval-mini b,.handoff-mini b,.boundary-mini b { font-size:11px; }.approval-mini em,.handoff-mini em { margin-left:auto; color:#96969c; font-size:7px; font-style:normal; }.handoff-mini > strong { margin-left:auto; color:var(--detail-strong); font-size:20px; }
.detail-timeline { display:grid; gap:0; margin:auto 0 0; padding:0; list-style:none; }.detail-timeline li { position:relative; display:grid; min-height:46px; padding:0 0 0 24px; grid-template-columns:1fr auto; align-items:start; color:#67676c; font-size:9px; }.detail-timeline li:not(:last-child)::after { position:absolute; top:9px; bottom:0; left:4px; width:1px; background:#cfd3d7; content:""; }.detail-timeline li > i { position:absolute; z-index:1; top:2px; left:0; width:9px; height:9px; border:2px solid #fff; border-radius:50%; background:var(--detail-strong); box-shadow:0 0 0 1px #ccd1d5; }.detail-timeline li b { color:#818187; font-size:7px; }
.signal-mini { display:grid; margin-top:auto; grid-template-columns:1fr 1fr; gap:8px; }.signal-mini i { padding:16px; border:1px solid rgba(29,29,31,.065); border-radius:15px; text-align:center; background:rgba(255,255,255,.8); font-size:9px; font-style:normal; }.signal-mini strong { grid-column:1/-1; padding:16px; color:var(--detail-strong); border-radius:15px; text-align:center; background:#fff; font-size:11px; }
.score-mini { display:grid; margin-top:auto; grid-template-columns:auto 1fr; align-items:end; gap:8px 16px; }.score-mini strong { grid-row:1/3; font-size:72px; line-height:.8; letter-spacing:-.07em; }.score-mini > span { height:7px; border-radius:99px; background:#dddde1; overflow:hidden; }.score-mini > span i { display:block; width:var(--score); height:100%; border-radius:inherit; background:var(--detail-strong); animation:detailGrow 1.8s ease both; }.score-mini small { color:#717177; font-size:8px; }@keyframes detailGrow { from { width:0; } }
.source-mini { display:grid; gap:8px; }.source-mini > div { display:grid; padding:12px; grid-template-columns:34px 1fr auto; align-items:center; gap:10px; border-radius:13px; background:#fff; }.source-mini > div > i { display:grid; width:34px; height:34px; color:var(--detail-strong); border-radius:10px; background:var(--detail-accent-2); font-size:9px; font-style:normal; place-items:center; }.source-mini span { display:grid; gap:3px; }.source-mini b { font-size:9px; }.source-mini small { color:#96969c; font-size:6px; }.source-mini em { color:#4f7d60; font-size:10px; font-style:normal; }
.boundary-mini { color:#725b2b; background:#f6f0e4; }.boundary-mini > i { background:#b58a3a; }
.timing-mini { display:grid; gap:8px; }.timing-mini > span { display:grid; padding:13px; grid-template-columns:12px 1fr auto; align-items:center; gap:10px; border-radius:13px; background:#fff; }.timing-mini > span > i { width:8px; height:8px; border-radius:50%; background:#c5c7ca; }.timing-mini > span.active > i { background:var(--detail-strong); box-shadow:0 0 0 5px rgba(134,104,49,.1); }.timing-mini b { font-size:9px; }.timing-mini small { color:#929298; font-size:7px; }
.permission-mini { display:flex; margin-top:auto; flex-wrap:wrap; gap:8px; }.permission-mini span { display:flex; padding:12px 14px; align-items:center; gap:8px; border-radius:99px; background:rgba(255,255,255,.85); color:#67676c; font-size:8px; }.permission-mini i { display:grid; width:18px; height:18px; color:#fff; border-radius:50%; background:#5b8066; font-size:7px; font-style:normal; place-items:center; }
.result-metric-mini { display:grid; margin-top:auto; grid-template-columns:auto 1fr; align-items:end; gap:5px 13px; }.result-metric-mini strong { font-size:55px; line-height:.85; letter-spacing:-.06em; }.result-metric-mini > span { color:#74747a; font-size:9px; }.result-metric-mini em { height:7px; grid-column:1/-1; border-radius:99px; background:#dddde1; overflow:hidden; }.result-metric-mini em i { display:block; width:var(--metric); height:100%; background:var(--detail-strong); animation:detailGrow 1.8s ease both; }.result-metric-mini small { grid-column:1/-1; color:#929298; font-size:7px; }
.hub-mini { position:relative; display:grid; min-height:300px; grid-template-columns:1fr 1fr; gap:10px; place-items:center; }.hub-mini > i { display:grid; width:80px; height:45px; color:#727278; border-radius:14px; background:#fff; font-size:8px; font-style:normal; place-items:center; }.hub-mini > strong { position:absolute; top:50%; left:50%; display:grid; width:122px; height:122px; align-content:center; justify-items:center; border:8px solid var(--detail-accent); border-radius:50%; background:#fff; box-shadow:0 18px 42px rgba(29,29,31,.1); transform:translate(-50%,-50%); }.hub-mini > strong span { font-size:28px; }.hub-mini > strong small { color:#8a8a90; font-size:7px; }
.owner-mini { display:grid; margin-top:auto; grid-template-columns:1fr 1fr; gap:10px; }.owner-mini > span { display:grid; padding:18px; grid-template-columns:38px 1fr; align-items:center; gap:10px; border-radius:17px; background:rgba(255,255,255,.86); }.owner-mini i { display:grid; width:38px; height:38px; grid-row:1/3; color:var(--detail-strong); border-radius:12px; background:var(--detail-accent); font-size:9px; font-style:normal; place-items:center; }.owner-mini b { font-size:9px; }.owner-mini small { color:#929298; font-size:7px; }

@media (max-width:1040px) { .solution-detail-hero { grid-template-columns:1fr; padding-top:130px; }.solution-family-scene { min-height:420px; }.solution-detail-heading,.solution-detail-proof .section-heading { align-items:flex-start; flex-direction:column; }.solution-detail-heading > p,.solution-detail-proof .section-heading > p { width:auto; max-width:620px; }.solution-detail-bento { grid-template-columns:1fr; grid-template-rows:none; }.detail-proof-card.detail-proof-primary,.detail-proof-card:not(.detail-proof-primary) { min-height:330px; grid-column:auto; grid-row:auto; }.detail-proof-card.detail-proof-primary { min-height:570px; } }
@media (max-width:720px) { .solution-detail-hero { width:calc(100% - 32px); min-height:0; padding:80px 0 55px; }.solution-detail-copy h1 { font-size:clamp(53px,15vw,72px); }.solution-family-scene { min-height:275px; padding:10px; border-radius:28px; }.solution-family-scene img { width:125%; }.solution-detail-demo { padding:75px 8px 80px; }.solution-detail-heading { padding:0 12px; }.solution-detail-heading h2 { font-size:49px; }.solution-detail-window { border-radius:22px; }.solution-detail-live-stage { min-height:520px; }.solution-detail-live-stage .appointment-calendar,.solution-detail-live-stage .support-sources { top:142px; }.solution-detail-live-stage .signal-field { top:50px; }.solution-detail-proof { padding-top:95px; }.solution-detail-proof .section-inner { width:calc(100% - 32px); }.solution-detail-bento { margin-top:45px; }.detail-proof-card { min-height:330px; padding:24px; border-radius:25px; }.detail-proof-card.detail-proof-primary { min-height:530px; } }

.page-cta { padding: 130px 5vw; text-align: center; }
.page-cta > div { width: min(960px, 90vw); margin: 0 auto; padding: 80px 6vw; border-radius: 36px; color: #fff; background: #1d1d1f; }
.page-cta h2 { margin: 0; font-size: clamp(48px, 5vw, 76px); line-height: .96; letter-spacing: -.06em; }
.page-cta p { max-width: 620px; margin: 22px auto 30px; color: #b8b8bd; font-size: 18px; line-height: 1.5; }
.page-cta .page-button { color: #1d1d1f; border-color: #fff; background: #fff; }

.page-footer { padding: 50px max(5vw, 32px) 46px; color: #6e6e73; background: #f5f5f7; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12px; }
.footer-bottom { display: flex; justify-content: space-between; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--page-line); font-size: 11px; }

.start-page { background: #fff; }
.start-layout { display: grid; width: min(1380px,calc(100% - 40px)); margin: 64px auto 120px; padding: 40px 0 0; grid-template-columns: minmax(0,.86fr) minmax(580px,1.14fr); align-items: start; gap: clamp(55px,7vw,110px); }
.start-copy { position: sticky; top: 122px; min-width: 0; padding: 28px 0 0; }
.start-copy .page-kicker { margin-bottom: 24px; }
.start-copy h1 { max-width: 660px; margin: 0; font-size: clamp(72px,7vw,112px); font-weight: 650; line-height: .87; letter-spacing: -.073em; }
.start-copy h1 span { color: #59595e; }
.start-lead { max-width: 600px; margin: 34px 0 0; color: var(--page-muted); font-size: clamp(18px,1.45vw,23px); line-height: 1.48; letter-spacing: -.025em; }
.start-family { position: relative; width: min(630px,112%); margin: 35px 0 15px -6%; overflow: visible; }
.start-family img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; animation: startFamilyIn 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes startFamilyIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.start-list { display: grid; max-width: 610px; margin-top: 6px; border-top: 1px solid var(--page-line); }
.start-list span { display: grid; min-height: 72px; grid-template-columns: 34px 105px 1fr; align-items: center; gap: 12px; border-bottom: 1px solid var(--page-line); }
.start-list b { color: #58789a; font-size: 10px; }.start-list i { font-size: 12px; font-style: normal; font-weight: 700; }.start-list small { color: #85858b; font-size: 10px; line-height: 1.42; }
.start-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: clamp(29px,3.5vw,48px); border: 1px solid rgba(29,29,31,.1); border-radius: 36px; background: #f5f5f7; box-shadow: 0 34px 90px rgba(29,29,31,.08); }
.start-form .full { grid-column: 1 / -1; }
.start-form-heading { grid-column: 1 / -1; margin-bottom: 22px; }
.start-form-heading > span { display: flex; align-items: center; gap: 8px; color: #66806f; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }.start-form-heading > span i { width: 7px; height: 7px; border-radius: 50%; background: #35a36c; box-shadow: 0 0 0 5px rgba(53,163,108,.1); }
.start-form-heading h2 { margin: 21px 0 15px; font-size: clamp(42px,4vw,61px); line-height: .94; letter-spacing: -.058em; }.start-form-heading p { max-width: 560px; margin: 0; color: #7c7c82; font-size: 12px; line-height: 1.5; }
.start-choice { margin: 0; padding: 0 0 22px; border: 0; border-bottom: 1px solid rgba(29,29,31,.09); }
.start-choice legend { display: flex; padding: 0; align-items: center; gap: 10px; color: #3d3d41; font-size: 11px; font-weight: 700; }.start-choice legend span { display: grid; width: 29px; height: 29px; color: #527393; border-radius: 9px; background: #e7edf4; font-size: 8px; place-items: center; }
.start-option-grid { display: grid; margin-top: 15px; grid-template-columns: repeat(5,1fr); gap: 6px; }.start-option-grid.channels { grid-template-columns: repeat(4,1fr); }
.start-option-grid label { cursor: pointer; }.start-option-grid input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }.start-option-grid label span { display: grid; min-height: 43px; padding: 0 8px; color: #6e6e74; border: 1px solid rgba(29,29,31,.09); border-radius: 12px; text-align: center; background: #fff; font-size: 8px; font-weight: 650; place-items: center; transition: color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease; }.start-option-grid label:hover span { transform: translateY(-2px); }.start-option-grid input:checked + span { color: #fff; border-color: #1d1d1f; background: #1d1d1f; box-shadow: 0 9px 24px rgba(29,29,31,.15); }
.start-identity { display: grid; margin-top: 8px; grid-template-columns: 1fr 1fr; gap: 13px; }.start-form label:not(.start-option-grid label) { display: grid; gap: 7px; color: #5c5c61; font-size: 10px; }.start-form label > span { color: #98989d; }
.start-form input:not([type="radio"]):not([type="checkbox"]),.start-form textarea { width: 100%; padding: 13px 14px; color: #1d1d1f; border: 1px solid rgba(29,29,31,.12); border-radius: 13px; outline: 0; background: #fff; transition: border-color .2s ease,box-shadow .2s ease; }.start-form input:not([type="radio"]):not([type="checkbox"]) { min-height: 48px; }.start-form textarea { resize: vertical; line-height: 1.45; }
.start-form input:focus,.start-form textarea:focus { border-color: #6b8bab; box-shadow: 0 0 0 4px rgba(70,111,153,.1); }
.start-note-field { margin-top: 2px; }
.start-form .field-warning { color: #8a6a35; font-size: 8px; font-weight: 520; line-height: 1.45; }
.start-submit { display: flex; min-height: 64px; margin-top: 4px; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 8px 8px 17px; border-radius: 17px; background: #1d1d1f; }.start-submit > span { display: grid; gap: 3px; color: #fff; }.start-submit > span b { font-size: 11px; }.start-submit > span small { color: #99999f; font-size: 7px; }.start-submit button { display: flex; min-height: 48px; align-items: center; gap: 18px; padding: 0 17px; color: #1d1d1f; border: 0; border-radius: 12px; background: #fff; font-size: 9px; font-weight: 700; cursor: pointer; }.start-submit button i { font-size: 15px; font-style: normal; transition: transform .2s ease; }.start-submit button:hover i { transform: translateX(3px); }
.form-note { margin: 2px 0 0; color: #8a8a90; font-size: 8px; line-height: 1.45; }.form-note a { text-decoration: underline; }

/* Legal and trust centre */
.legal-page { background: #fff; }
.legal-shell { width: min(1240px,calc(100% - 40px)); margin: 0 auto; padding: 96px 0 120px; }
.legal-hero { position: relative; min-height: 520px; padding: clamp(56px,7vw,100px); border: 1px solid var(--page-line); border-radius: 40px; background: #f5f5f7; overflow: hidden; }
.legal-hero::after { position: absolute; right: -12%; bottom: -42%; width: 55%; aspect-ratio: 1; border: 1px solid rgba(29,29,31,.08); border-radius: 50%; box-shadow: 0 0 0 42px rgba(255,255,255,.42),0 0 0 84px rgba(255,255,255,.25); content: ""; }
.legal-hero > * { position: relative; z-index: 1; }
.legal-eyebrow { margin: 0 0 22px; color: #4f6f90; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .13em; }
.legal-hero h1 { max-width: 940px; margin: 0; font-size: clamp(58px,7vw,104px); font-weight: 650; line-height: .9; letter-spacing: -.068em; }
.legal-hero h1 span { color: #69696e; }
.legal-hero > p:not(.legal-eyebrow) { max-width: 720px; margin: 30px 0 0; color: #6e6e73; font-size: clamp(17px,1.6vw,23px); line-height: 1.48; }
.legal-status { display: grid; margin: 28px 0 0; padding: 18px 20px; grid-template-columns: 10px 1fr; gap: 4px 13px; border: 1px solid rgba(161,129,78,.2); border-radius: 18px; background: #f5f0e7; }
.legal-status i { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: #a1814e; }
.legal-status b { font-size: 12px; }.legal-status span { grid-column: 2; color: #756d61; font-size: 11px; line-height: 1.5; }
.legal-grid { display: grid; margin-top: 24px; grid-template-columns: repeat(3,1fr); gap: 14px; }
.legal-card { display: grid; min-height: 260px; padding: 28px; align-content: space-between; border: 1px solid var(--page-line); border-radius: 26px; background: #fff; transition: transform .25s ease,box-shadow .25s ease; }
.legal-card:hover { box-shadow: 0 22px 60px rgba(29,29,31,.08); transform: translateY(-4px); }
.legal-card > span { display: grid; width: 36px; height: 36px; color: #4f6f90; border-radius: 11px; background: #e8eef5; font-size: 10px; place-items: center; }
.legal-card h2 { margin: 38px 0 10px; font-size: 25px; letter-spacing: -.04em; }.legal-card p { margin: 0; color: #77777c; font-size: 12px; line-height: 1.55; }.legal-card b { margin-top: 24px; font-size: 11px; }
.legal-layout { display: grid; margin-top: 56px; grid-template-columns: 270px minmax(0,1fr); align-items: start; gap: 56px; }
.legal-toc { position: sticky; top: 100px; display: grid; gap: 4px; padding: 16px; border: 1px solid var(--page-line); border-radius: 20px; background: #f7f7f8; }
.legal-toc strong { padding: 9px 10px 13px; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }.legal-toc a { padding: 10px; color: #69696e; border-radius: 10px; font-size: 11px; }.legal-toc a:hover { color: #1d1d1f; background: #fff; }
.legal-content { max-width: 820px; }
.legal-content section { padding: 0 0 48px; scroll-margin-top: 115px; }
.legal-content section + section { padding-top: 48px; border-top: 1px solid var(--page-line); }
.legal-content h2 { margin: 0 0 18px; font-size: clamp(31px,3vw,46px); line-height: 1; letter-spacing: -.05em; }.legal-content h3 { margin: 28px 0 10px; font-size: 18px; letter-spacing: -.025em; }
.legal-content p,.legal-content li { color: #5f5f65; font-size: 14px; line-height: 1.7; }.legal-content ul,.legal-content ol { display: grid; gap: 10px; padding-left: 20px; }.legal-content a { color: #275f9a; text-decoration: underline; text-underline-offset: 3px; }
.legal-facts { display: grid; margin: 22px 0; grid-template-columns: repeat(2,1fr); gap: 10px; }.legal-facts div { padding: 18px; border-radius: 16px; background: #f5f5f7; }.legal-facts small { display: block; margin-bottom: 7px; color: #88888e; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }.legal-facts b { font-size: 13px; }
.legal-callout { margin: 24px 0; padding: 20px; border-left: 3px solid #55799d; border-radius: 0 15px 15px 0; background: #eef3f8; }.legal-callout.warning { border-left-color: #a1814e; background: #f5f0e7; }.legal-callout p { margin: 0; }
.legal-source-list { display: grid; gap: 8px; margin-top: 20px; }.legal-source-list a { display: flex; padding: 13px 15px; justify-content: space-between; gap: 20px; border: 1px solid var(--page-line); border-radius: 13px; text-decoration: none; }.legal-source-list a::after { content: "↗"; }
.legal-updated { margin: 18px 0 0; color: #89898e; font-size: 10px; }
.faq-list { display: grid; gap: 0; border-top: 1px solid var(--page-line); }.faq-list details { border-bottom: 1px solid var(--page-line); }.faq-list summary { display: grid; padding: 24px 0; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; font-size: 17px; font-weight: 650; cursor: pointer; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { color: #8b8b90; font-size: 10px; }.faq-list summary::after { font-size: 22px; font-weight: 300; content: "+"; }.faq-list details[open] summary::after { content: "−"; }.faq-list details > div { padding: 0 54px 26px; }.faq-list details p { margin-top: 0; }
@media (max-width:900px) { .legal-grid { grid-template-columns:1fr 1fr; }.legal-layout { grid-template-columns:1fr; gap:32px; }.legal-toc { position:static; grid-template-columns:repeat(2,1fr); }.legal-toc strong { grid-column:1/-1; } }
@media (max-width:620px) { .legal-shell { width:calc(100% - 24px); padding-top:70px; }.legal-hero { min-height:0; padding:38px 24px; border-radius:28px; }.legal-grid { grid-template-columns:1fr; }.legal-card { min-height:220px; }.legal-toc { grid-template-columns:1fr; }.legal-facts { grid-template-columns:1fr; }.faq-list summary { grid-template-columns:30px 1fr auto; }.faq-list details > div { padding-left:42px; } }

.signin-card { width: min(520px, 90vw); margin: 170px auto 120px; padding: 42px; border: 1px solid var(--page-line); border-radius: 30px; text-align: center; box-shadow: 0 25px 80px rgba(29,29,31,.1); }
.signin-card .global-brand { justify-content: center; }
.signin-card h1 { margin: 38px 0 16px; font-size: 54px; letter-spacing: -.055em; }
.signin-card p { color: var(--page-muted); line-height: 1.5; }
.signin-card .page-button { margin-top: 22px; }

@media (max-width: 1040px) {
  .global-nav { gap: 10px; }
  .global-links { display: none; position: absolute; top: calc(100% + 8px); right: 0; left: 0; padding: 10px; border: 1px solid var(--page-line); border-radius: 16px; background: #fff; box-shadow: 0 20px 60px rgba(29,29,31,.12); }
  .global-nav.is-open .global-links { display: grid; }
  .nav-menu { position: static; display: none; width: 100%; margin-top: 4px; box-shadow: none; opacity: 1; pointer-events: auto; transform: none; }
  .nav-group.is-open .nav-menu { display: grid; }
  .nav-group > button, .global-link { width: 100%; justify-content: space-between; text-align: left; }
  .global-actions { margin-left: auto; }
  .nav-toggle { display: grid; gap: 4px; }
  .page-hero { min-height: 690px; }
  .live-product-stage { padding: 35px 25px; }
  .live-satellite { display: none; }
  .live-app-grid { grid-template-columns: 190px minmax(360px,1fr) 220px; }
}

@media (max-width: 720px) {
  .global-nav { top: 8px; width: calc(100% - 16px); }
  .global-brand,
  .nav-start { min-height: 44px; }
  .nav-start { display: inline-flex; align-items: center; }
  .nav-toggle { width: 44px; height: 44px; }
  .global-actions .nav-signin { display: none; }
  .nav-start { padding-inline: 11px; }
  .page-shell { padding-top: 70px; }
  .page-hero { min-height: 630px; }
  .page-hero-copy { width: 90vw; }
  .page-hero h1 { font-size: clamp(53px, 15vw, 72px); }
  .page-lead { font-size: 18px; }
  .page-actions { flex-direction: column; align-items: center; }
  .page-visual { min-height: 470px; margin-top: -15px; padding: 14px; }
  .visual-grid { grid-template-columns: 1fr; }
  .visual-card:nth-child(3) { display: none; }
  .live-product-stage { width: calc(100% - 16px); margin-top: -15px; padding: 27px 10px 10px; border-radius: 28px; }
  .live-stage-heading { display: block; padding: 0 8px; }
  .live-stage-heading p { width: auto; margin-top: 13px; }
  .live-app { border-radius: 19px; }
  .live-app-grid { grid-template-columns: 1fr; min-height: 640px; }
  .live-inbox, .live-context { display: none; }
  .live-conversation { border-right: 0; }
  .live-thread { padding: 16px 12px 20px; }
  .live-operation-card { width: 100%; }
  .live-app-footer { height: 42px; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-card { min-height: 230px; }
  .proof-card h3 { margin-top: 55px; }
  .inbox-proof-card { min-height: 500px; }
  .inbox-proof-card h3 { margin-top: 24px; }
  .start-layout { width: calc(100% - 24px); margin-top: 55px; grid-template-columns: 1fr; gap: 55px; }
  .start-copy { position: relative; top: auto; text-align: center; }
  .start-copy h1, .start-lead { margin-right: auto; margin-left: auto; }
  .start-family { width: 100%; margin-right: auto; margin-left: auto; }
  .start-list { margin-right: auto; margin-left: auto; text-align: left; }
  .start-form { grid-template-columns: 1fr; padding: 24px 18px; border-radius: 28px; }
  .start-form .full, .start-form-heading { grid-column: 1; }
  .start-option-grid, .start-option-grid.channels { grid-template-columns: repeat(2,1fr); }
  .start-identity { grid-template-columns: 1fr; }
  .start-submit { align-items: stretch; flex-direction: column; }
  .start-submit button { justify-content: space-between; }
  .footer-top, .footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; }
}

/* Automation flagship page */
.automation-page { --automation-blue: #315f98; --automation-violet: #766887; --automation-sage: #788b73; }
.automation-hero { display: grid; width: min(1380px,calc(100% - 40px)); min-height: 790px; margin: 0 auto 80px; grid-template-columns: .86fr 1.14fr; align-items: center; gap: clamp(35px,5vw,82px); }
.automation-hero-copy { padding-left: clamp(10px,3vw,50px); }
.automation-hero-copy .page-kicker { margin-bottom: 20px; }
.automation-hero-copy h1 { max-width: 720px; margin: 0; font-size: clamp(67px,6.5vw,112px); font-weight: 650; line-height: .91; letter-spacing: -.067em; }
.automation-hero-copy h1 span { color: #55555a; }
.automation-hero-copy > p:not(.page-kicker) { max-width: 620px; margin: 30px 0 0; color: #74747a; font-size: clamp(18px,1.55vw,24px); line-height: 1.47; letter-spacing: -.027em; }
.automation-hero-copy .page-actions { justify-content: flex-start; }
.automation-hero-metrics { display: grid; max-width: 600px; margin: 52px 0 0; grid-template-columns: repeat(3,1fr); }
.automation-hero-metrics div { display: grid; gap: 8px; padding: 0 18px; border-left: 1px solid #e1e1e4; }
.automation-hero-metrics div:first-child { padding-left: 0; border-left: 0; }
.automation-hero-metrics dt { color: #9a9a9f; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.automation-hero-metrics dd { margin: 0; color: #4e4e54; font-size: 12px; font-weight: 600; }
.automation-hero-scene { position: relative; height: 650px; margin: 0; border: 1px solid rgba(29,29,31,.07); border-radius: 44px; background: #f7f7f8; box-shadow: 0 34px 95px rgba(29,29,31,.1); overflow: hidden; }
.automation-hero-scene::before { position: absolute; inset: 0; background: radial-gradient(circle at 58% 34%,rgba(49,95,152,.1),transparent 35%),radial-gradient(circle at 35% 78%,rgba(118,104,135,.085),transparent 30%); content: ""; }
.automation-hero-scene::after { position: absolute; right: 6%; bottom: 10%; left: 6%; height: 22%; border-radius: 50%; background: rgba(29,29,31,.06); filter: blur(32px); content: ""; }
.automation-hero-scene > img { position: absolute; z-index: 2; right: -4%; bottom: 5%; width: 108%; max-width: none; height: auto; mix-blend-mode: multiply; animation: automationFamilyArrive 1.15s cubic-bezier(.2,.8,.2,1) both; }
@keyframes automationFamilyArrive { from { opacity: 0; transform: translateY(45px) scale(.97); } to { opacity: 1; transform: none; } }
.automation-hero-orbit { position: absolute; z-index: 1; top: 11%; right: 8%; width: 340px; height: 340px; border: 1px solid rgba(49,95,152,.13); border-radius: 50%; }
.automation-hero-orbit::before,.automation-hero-orbit::after { position: absolute; border: 1px solid rgba(118,104,135,.12); border-radius: 50%; content: ""; }
.automation-hero-orbit::before { inset: 42px; }.automation-hero-orbit::after { inset: 92px; }
.automation-hero-scene figcaption,.automation-hero-note { position: absolute; z-index: 4; border: 1px solid rgba(29,29,31,.08); background: rgba(255,255,255,.9); box-shadow: 0 20px 45px rgba(29,29,31,.09); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.automation-hero-scene figcaption { top: 37px; left: 35px; display: grid; min-width: 220px; gap: 6px; padding: 18px; border-radius: 19px; }
.automation-hero-scene figcaption span { display: flex; align-items: center; gap: 7px; color: #718078; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.automation-hero-scene figcaption span i { width: 7px; height: 7px; border-radius: 50%; background: #35a571; box-shadow: 0 0 0 5px rgba(53,165,113,.1); }
.automation-hero-scene figcaption strong { font-size: 18px; letter-spacing: -.035em; }.automation-hero-scene figcaption small { color: #96969b; font-size: 9px; }
.automation-hero-note { display: grid; gap: 4px; min-width: 155px; padding: 13px 15px; border-radius: 15px; animation: automationNoteFloat 4s ease-in-out infinite; }
.automation-hero-note small { color: #99999e; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }.automation-hero-note b { font-size: 10px; }
.note-trigger { top: 25%; right: 4%; }.note-audit { right: 9%; bottom: 7%; animation-delay: -2s; }
@keyframes automationNoteFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.automation-flagship { margin-top: 0; padding-top: clamp(42px,5vw,72px); background: #f4f4f6; }
.automation-flagship .feature-workspace { box-shadow: 0 34px 95px rgba(29,29,31,.13); }
.automation-flagship .automation-live-canvas { min-height: 720px; }
.automation-guardrail { display: grid; gap: 7px; margin-top: 36px; padding: 15px; border: 1px solid #e0e3e6; border-radius: 14px; background: #fff; }
.automation-guardrail span { color: #8c929b; font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }.automation-guardrail b { font-size: 9px; line-height: 1.4; }.automation-guardrail small { color: #818891; font-size: 7px; }

.automation-principles { padding: 145px 5vw 155px; background: #fff; }
.automation-principles .section-inner,.automation-templates .section-inner { width: min(1280px,92vw); }
.automation-section-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,400px); align-items: end; gap: 20px 70px; }
.automation-section-heading > span { grid-column: 1 / -1; color: #5f7690; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.automation-section-heading h2 { margin: 0; font-size: clamp(57px,6.2vw,96px); font-weight: 650; line-height: .88; letter-spacing: -.067em; }
.automation-section-heading h2 em { color: #5b5b60; font-style: normal; }.automation-section-heading p { margin: 0 0 4px; color: #77777d; font-size: 16px; line-height: 1.55; }
.automation-bento { display: grid; margin-top: 80px; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: 350px; gap: 15px; }
.automation-bento-card { position: relative; padding: 28px; border: 1px solid rgba(29,29,31,.05); border-radius: 30px; background: #f4f5f7; overflow: hidden; }
.automation-bento-card > span { color: #607b99; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }.automation-bento-card h3 { max-width: 370px; margin: 64px 0 12px; font-size: clamp(27px,2.3vw,37px); line-height: .98; letter-spacing: -.05em; }.automation-bento-card > p { max-width: 390px; margin: 0; color: #77777d; font-size: 13px; line-height: 1.5; }
.bento-trigger { grid-row: span 2; background: #edf2f6; }.bento-decision { grid-column: span 2; background: #f4f2ed; }.bento-approval { background: #f1edf2; }.bento-handoff { background: #eef3f0; }.bento-audit { background: #f3f3f5; }
.event-signal,.approval-ticket,.handoff-route { position: absolute; right: 24px; bottom: 24px; left: 24px; display: flex; min-height: 86px; align-items: center; gap: 12px; padding: 16px; border: 1px solid rgba(29,29,31,.07); border-radius: 17px; background: rgba(255,255,255,.82); box-shadow: 0 16px 40px rgba(29,29,31,.055); }
.event-signal i,.handoff-route i { display: grid; width: 42px; height: 42px; flex: 0 0 auto; color: #315f98; border-radius: 13px; background: #e4edf6; font-style: normal; place-items: center; }.event-signal b { font-size: 11px; }.event-signal small { margin-left: auto; color: #99999e; font-size: 8px; }
.decision-path { position: absolute; right: 30px; bottom: 34px; left: 30px; display: flex; align-items: center; justify-content: center; gap: 12px; }.decision-path b,.decision-path strong { padding: 13px 16px; border-radius: 12px; background: rgba(255,255,255,.82); font-size: 9px; }.decision-path strong { color: #fff; background: #293746; }.decision-path i { width: clamp(25px,4vw,70px); height: 1px; background: #b9bec4; }
.approval-ticket span,.handoff-route span { display: grid; gap: 5px; }.approval-ticket small,.handoff-route small { color: #96969c; font-size: 8px; }.approval-ticket b,.handoff-route b { font-size: 11px; }.approval-ticket em { margin-left: auto; padding: 8px 10px; color: #8b6d37; border-radius: 9px; background: #fbf0d8; font-size: 8px; font-style: normal; font-weight: 700; }
.handoff-route strong { margin-left: auto; color: #668273; font-size: 18px; }.bento-audit ol { position: absolute; right: 24px; bottom: 20px; left: 24px; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }.bento-audit li { display: grid; grid-template-columns: 9px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(29,29,31,.08); }.bento-audit li i { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #4d8b64; }.bento-audit li span { display: flex; justify-content: space-between; gap: 12px; }.bento-audit li b { font-size: 8px; }.bento-audit li small { color: #99999e; font-size: 7px; }

.automation-templates { padding: 140px 5vw 170px; background: #f5f5f7; }
.automation-section-heading.compact { grid-template-columns: 1fr; }.automation-section-heading.compact h2 { max-width: 840px; }
.automation-template-grid { display: grid; margin-top: 75px; grid-template-columns: 1fr 1fr; gap: 14px; }
.automation-template-grid a { display: grid; min-height: 180px; grid-template-columns: 58px 1fr; align-items: center; gap: 20px; padding: 26px; border: 1px solid rgba(29,29,31,.07); border-radius: 25px; background: #fff; transition: transform .25s ease,box-shadow .25s ease; }.automation-template-grid a:hover { box-shadow: 0 23px 55px rgba(29,29,31,.08); transform: translateY(-4px); }.automation-template-grid > a > i { display: grid; width: 54px; height: 54px; color: #476888; border-radius: 17px; background: #e8eff6; font-size: 14px; font-style: normal; place-items: center; }.automation-template-grid a:nth-child(2) > i { color: #6f607b; background: #eee9f1; }.automation-template-grid a:nth-child(3) > i { color: #697b6c; background: #e9f0ea; }.automation-template-grid a:nth-child(4) > i { color: #8a7348; background: #f5eddd; }.automation-template-grid a > span { display: grid; gap: 7px; }.automation-template-grid small { color: #939399; font-size: 9px; text-transform: uppercase; letter-spacing: .09em; }.automation-template-grid b { font-size: clamp(20px,2vw,29px); line-height: 1.05; letter-spacing: -.04em; }.automation-template-grid em { margin-top: 5px; color: #73737a; font-size: 9px; font-style: normal; }

@media (max-width: 1100px) {
  .automation-hero { min-height: 720px; grid-template-columns: 1fr 1fr; gap: 30px; }.automation-hero-copy h1 { font-size: clamp(58px,7vw,82px); }.automation-hero-scene { height: 560px; }.automation-hero-metrics { display: none; }
  .automation-bento { grid-template-columns: 1fr 1fr; }.bento-trigger { grid-row: auto; }.bento-decision { grid-column: auto; }.bento-audit { grid-column: span 2; }
}
@media (max-width: 760px) {
  .automation-hero { width: calc(100% - 18px); min-height: auto; margin-top: 55px; margin-bottom: 65px; grid-template-columns: 1fr; }.automation-hero-copy { padding: 25px 10px; text-align: center; }.automation-hero-copy h1 { margin: 0 auto; font-size: clamp(54px,15.5vw,78px); }.automation-hero-copy > p:not(.page-kicker) { font-size: 17px; }.automation-hero-copy .page-actions { justify-content: center; }.automation-hero-scene { height: 480px; border-radius: 29px; }.automation-hero-scene > img { right: -25%; bottom: 4%; width: 150%; }.automation-hero-scene figcaption { top: 20px; left: 20px; }.automation-hero-note { display: none; }
  .automation-flagship { width: calc(100% - 16px); }.automation-flagship .automation-live-canvas { min-height: 640px; }.automation-guardrail { display: none; }
  .automation-principles,.automation-templates { padding: 95px 12px; }.automation-section-heading { display: block; }.automation-section-heading > span { display: block; margin-bottom: 18px; }.automation-section-heading h2 { font-size: clamp(54px,15vw,78px); }.automation-section-heading p { margin-top: 26px; }.automation-bento { margin-top: 48px; grid-template-columns: 1fr; grid-auto-rows: 330px; }.bento-audit { grid-column: auto; }
  .automation-template-grid { margin-top: 48px; grid-template-columns: 1fr; }.automation-template-grid a { min-height: 150px; padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .automation-hero-scene > img,.automation-hero-note { animation: none !important; }
}

/* Integrations flagship page */
.integrations-page { --integration-blue: #376897; --integration-sage: #728977; --integration-violet: #786a84; }
.integrations-hero { display: grid; width: min(1380px,calc(100% - 40px)); min-height: 805px; margin: 0 auto 85px; grid-template-columns: .86fr 1.14fr; align-items: center; gap: clamp(40px,5vw,86px); }
.integrations-hero-copy { padding-left: clamp(10px,3vw,50px); }.integrations-hero-copy .page-kicker { margin-bottom: 20px; }
.integrations-hero-copy h1 { max-width: 730px; margin: 0; font-size: clamp(66px,6.35vw,108px); font-weight: 650; line-height: .91; letter-spacing: -.067em; }.integrations-hero-copy h1 span { color: #55555a; }
.integrations-hero-copy > p:not(.page-kicker) { max-width: 640px; margin: 30px 0 0; color: #74747a; font-size: clamp(18px,1.5vw,23px); line-height: 1.48; letter-spacing: -.026em; }.integrations-hero-copy .page-actions { justify-content: flex-start; }
.integrations-trust { display: flex; flex-wrap: wrap; gap: 9px 22px; margin-top: 46px; color: #6f6f75; font-size: 10px; }.integrations-trust span { display: flex; align-items: center; gap: 7px; }.integrations-trust i { width: 7px; height: 7px; border-radius: 50%; background: #34a36c; box-shadow: 0 0 0 4px rgba(52,163,108,.1); }
.integrations-hero-scene { position: relative; height: 660px; margin: 0; border: 1px solid rgba(29,29,31,.07); border-radius: 44px; background: #f7f7f8; box-shadow: 0 34px 95px rgba(29,29,31,.1); overflow: hidden; }
.integrations-hero-scene::before { position: absolute; inset: 0; background: radial-gradient(circle at 64% 25%,rgba(55,104,151,.085),transparent 34%),radial-gradient(circle at 28% 76%,rgba(120,106,132,.075),transparent 31%); content: ""; }
.integrations-hero-scene > img { position: absolute; z-index: 2; right: -6%; bottom: 2%; width: 112%; max-width: none; height: auto; mix-blend-mode: multiply; animation: integrationFamilyEnter 1.15s cubic-bezier(.2,.8,.2,1) both; }
@keyframes integrationFamilyEnter { from { opacity: 0; transform: translateY(42px) scale(.975); } to { opacity: 1; transform: none; } }
.integration-brand-card { position: absolute; z-index: 4; display: flex; min-width: 190px; align-items: center; gap: 11px; padding: 12px; border: 1px solid rgba(29,29,31,.08); border-radius: 17px; background: rgba(255,255,255,.92); box-shadow: 0 20px 45px rgba(29,29,31,.09); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); animation: integrationCardFloat 4.5s ease-in-out infinite; }
.integration-brand-card > span { display: grid; gap: 3px; }.integration-brand-card small { color: #99999e; font-size: 7px; }.integration-brand-card b { font-size: 10px; }.integration-brand-card > em { margin-left: auto; color: #527661; font-size: 7px; font-style: normal; font-weight: 700; }
.brand-mark { display: grid; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 13px; place-items: center; overflow: hidden; }.brand-mark svg { width: 26px; height: 26px; }
.brand-mark.has-brand-image { padding: 4px; border: 1px solid #e4e6e9; background: #fff; }.brand-mark.has-brand-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.whatsapp-mark { color: #fff; background: #29b65d; }.whatsapp-mark svg circle { fill: none; stroke: currentColor; stroke-width: 1.5; }.whatsapp-mark svg path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.instagram-mark { color: #fff; background: linear-gradient(145deg,#4e5bd5,#b643ac 48%,#ee6759 75%,#f2b348); }.instagram-mark svg * { fill: none; stroke: currentColor; stroke-width: 1.6; }
.calendar-mark { color: #3569b8; border: 1px solid #dfe3e7; background: linear-gradient(#4285f4 0 9px,#fff 9px); }.calendar-mark b { padding-top: 7px; font-size: 12px; }
.hero-wa { top: 35px; left: 32px; }.hero-ig { top: 148px; right: 27px; animation-delay: -1.5s; }.hero-calendar { right: 40px; bottom: 31px; animation-delay: -3s; }
@keyframes integrationCardFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.integrations-hero-scene figcaption { position: absolute; z-index: 4; right: 31px; bottom: 135px; display: grid; min-width: 205px; gap: 5px; padding: 17px; border: 1px solid rgba(29,29,31,.08); border-radius: 17px; background: rgba(255,255,255,.92); box-shadow: 0 20px 45px rgba(29,29,31,.08); }.integrations-hero-scene figcaption span { display: flex; align-items: center; gap: 7px; color: #66806f; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }.integrations-hero-scene figcaption span i { width: 7px; height: 7px; border-radius: 50%; background: #35a36c; }.integrations-hero-scene figcaption b { font-size: 13px; }.integrations-hero-scene figcaption small { color: #99999e; font-size: 7px; }

.integration-showcase { position: relative; width: min(1480px,calc(100% - 32px)); margin: 0 auto 0; padding: clamp(42px,5vw,72px) clamp(15px,3.5vw,52px) clamp(15px,3.5vw,52px); border: 1px solid rgba(29,29,31,.06); border-radius: 42px; background: #f4f4f6; overflow: hidden; scroll-margin-top: 82px; }.integration-showcase::before { position: absolute; inset: 0; background-image: radial-gradient(rgba(55,104,151,.1) .65px,transparent .65px); background-size: 18px 18px; opacity: .18; content: ""; pointer-events: none; }
.integration-showcase-heading { position: relative; z-index: 1; display: flex; width: min(1280px,100%); margin: 0 auto 42px; align-items: end; justify-content: space-between; gap: 55px; }.integration-showcase-heading > div > span { display: block; margin-bottom: 13px; color: #547494; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }.integration-showcase-heading h2 { margin: 0; font-size: clamp(48px,5.4vw,82px); font-weight: 650; line-height: .91; letter-spacing: -.063em; }.integration-showcase-heading h2 em { color: #59595e; font-style: normal; }.integration-showcase-heading > p { width: min(420px,35vw); margin: 0 0 5px; color: #737379; font-size: 15px; line-height: 1.52; }
.integration-workspace { position: relative; z-index: 1; width: min(1360px,100%); margin: 0 auto; box-shadow: 0 34px 95px rgba(29,29,31,.14); }
.integration-workspace .fw-browser-bar > em { display: flex; align-items: center; gap: 6px; }.integration-workspace .fw-browser-bar > em i { width: 6px; height: 6px; border-radius: 50%; background: #34a36c; box-shadow: 0 0 0 4px rgba(52,163,108,.1); }
.integration-live-grid { display: grid; min-height: 710px; grid-template-columns: 280px minmax(560px,1fr) 280px; }.integration-live-grid > * { min-width: 0; }
.integration-source-pane { display: flex; flex-direction: column; padding: 24px 16px; border-right: 1px solid #e3e5e8; background: #f5f6f8; }.integration-source-pane > header { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 0 5px 10px; }.integration-source-pane > header span { display: grid; gap: 5px; }.integration-source-pane > header small { color: #9298a1; font-size: 7px; text-transform: uppercase; letter-spacing: .09em; }.integration-source-pane > header b { font-size: 15px; }.integration-source-pane > header em { color: #5b7b66; font-size: 7px; font-style: normal; }
.integration-source-pane nav { display: grid; gap: 5px; margin-top: 15px; }.integration-source-pane nav button { display: grid; width: 100%; grid-template-columns: 39px 1fr auto; align-items: center; gap: 10px; padding: 11px; color: #6d737c; border: 1px solid transparent; border-radius: 13px; text-align: left; background: transparent; cursor: pointer; transition: color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease; }.integration-source-pane nav button:hover { transform: translateX(2px); }.integration-source-pane nav button.is-active { color: #20252b; border-color: #dfe3e7; background: #fff; box-shadow: 0 11px 28px rgba(29,29,31,.06); }
.source-logo { display: grid; width: 39px; height: 39px; color: #fff; border-radius: 12px; font-size: 9px; font-style: normal; font-weight: 700; place-items: center; }.source-whatsapp,.whatsapp-dir { background: #2cb663; }.source-instagram,.instagram-dir { background: linear-gradient(145deg,#4e5bd5,#b643ac 48%,#ef675b 75%,#efa942); }.source-calendar,.calendar-dir { color: #3569b8; border: 1px solid #dfe3e7; background: linear-gradient(#4285f4 0 9px,#fff 9px); }.source-email,.email-dir { color: #d34e42; border: 1px solid #e2e4e7; background: #fff; }.source-crm,.crm-dir { background: #e68a36; }
.source-logo.has-logo { padding: 4px; border: 1px solid #e1e4e7; background: #fff; overflow: hidden; }.source-logo.has-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.integration-source-pane nav button > span { display: grid; gap: 4px; }.integration-source-pane nav b { font-size: 9px; }.integration-source-pane nav small { color: #979ca4; font-size: 6px; }.integration-source-pane nav button > em { color: #66816f; font-size: 6px; font-style: normal; }.integration-source-pane > footer { display: flex; margin-top: auto; align-items: center; gap: 7px; padding: 13px 5px 0; color: #8e949d; border-top: 1px solid #e1e3e6; font-size: 7px; }.integration-source-pane > footer span { display: flex; align-items: center; gap: 6px; }.integration-source-pane > footer span i { width: 6px; height: 6px; border-radius: 50%; background: #35a36c; }.integration-source-pane > footer b { margin-left: auto; color: #5e656e; }
.integration-map-pane { background: radial-gradient(#dce1e5 .65px,transparent .65px); background-size: 18px 18px; }.integration-map-pane > header { display: flex; min-height: 92px; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; border-bottom: 1px solid #e5e7ea; background: rgba(255,255,255,.96); }.integration-map-pane > header span { display: grid; gap: 4px; }.integration-map-pane > header small { color: #9298a1; font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }.integration-map-pane > header h3 { margin: 0; font-size: 17px; }.integration-map-pane > header .feature-primary { width: 178px; min-height: 42px; font-size: 8px; }
.integration-map { position: relative; min-height: 618px; padding: 36px; }.integration-source-card,.integration-core-card { position: relative; z-index: 2; display: flex; width: min(470px,86%); min-height: 94px; margin: 0 auto; align-items: center; gap: 14px; padding: 16px; border: 1px solid #dde2e7; border-radius: 17px; background: rgba(255,255,255,.96); box-shadow: 0 15px 38px rgba(29,29,31,.07); }.integration-source-card > i { display: grid; width: 48px; height: 48px; color: #fff; border-radius: 15px; background: #2cb663; font-size: 12px; font-style: normal; font-weight: 700; place-items: center; transition: background .25s ease,color .25s ease; }.integration-source-card > span { display: grid; gap: 4px; }.integration-source-card small,.integration-core-card small { color: #9399a2; font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }.integration-source-card b { font-size: 12px; }.integration-source-card em { color: #9298a1; font-size: 7px; font-style: normal; }
.integration-source-card > i.source-logo.has-logo { width: 48px; height: 48px; padding: 5px; border: 1px solid #e1e4e7; background: #fff; }
.integration-route { position: relative; z-index: 1; display: flex; width: 6px; height: 82px; margin: 0 auto; flex-direction: column; justify-content: space-around; background: #cfd5da; }.integration-route::after { position: absolute; right: -4px; bottom: -1px; width: 9px; height: 9px; border-right: 2px solid #9ba5ae; border-bottom: 2px solid #9ba5ae; content: ""; transform: rotate(45deg); }.integration-route span { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #9da7b0; transition: background .25s ease,box-shadow .25s ease; }.integration-route span.is-active { background: #4d7ca9; box-shadow: 0 0 0 5px rgba(77,124,169,.13); }
.integration-core-card { width: min(430px,80%); justify-content: center; flex-direction: column; gap: 4px; text-align: center; }.integration-core-mark { display: grid; width: 39px; height: 39px; margin-top: -36px; color: #fff; border: 4px solid #fff; border-radius: 13px; background: #202124; box-shadow: 0 9px 20px rgba(29,29,31,.15); font-size: 18px; font-weight: 700; place-items: center; }.integration-core-card strong { font-size: 15px; }.integration-core-card em { color: #9298a1; font-size: 7px; font-style: normal; }
.integration-output-grid { display: grid; margin: 45px auto 0; grid-template-columns: repeat(3,1fr); gap: 8px; }.integration-output-grid article { display: grid; min-height: 120px; grid-template-columns: 34px 1fr; align-content: center; align-items: center; gap: 10px; padding: 13px; border: 1px solid #dfe3e7; border-radius: 14px; background: rgba(255,255,255,.94); opacity: .65; transition: opacity .3s ease,transform .3s ease,border .3s ease,box-shadow .3s ease; }.integration-output-grid article > i { display: grid; width: 34px; height: 34px; color: #536d88; border-radius: 10px; background: #eaf0f6; font-size: 8px; font-style: normal; place-items: center; }.integration-output-grid article > span { display: grid; gap: 4px; }.integration-output-grid small { color: #969ba3; font-size: 6px; }.integration-output-grid b { font-size: 8px; }.integration-output-grid article > em { grid-column: 2; color: #999fa7; font-size: 6px; font-style: normal; }.integration-output-grid article.is-running { opacity: 1; border-color: #9eb5ca; box-shadow: 0 13px 30px rgba(55,104,151,.11); transform: translateY(-3px); }.integration-output-grid article.is-done { opacity: 1; border-color: #cdded3; }.integration-output-grid article.is-done > i { color: #fff; background: #4d8b64; }.integration-output-grid article.is-done > em { color: #4d7d5d; }
.integration-health-pane { padding: 25px 18px; border-left: 1px solid #e4e6e9; background: #fafafb; }.integration-health-pane > small { color: #9197a0; font-size: 7px; text-transform: uppercase; letter-spacing: .09em; }.integration-health-pane > h3 { margin: 10px 0 23px; font-size: 18px; line-height: 1.15; }.integration-health-score { display: flex; align-items: end; gap: 6px; padding: 18px; border: 1px solid #e0e3e6; border-radius: 15px; background: #fff; }.integration-health-score > strong { font-size: 49px; font-weight: 600; line-height: .8; letter-spacing: -.07em; }.integration-health-score > span { display: grid; gap: 2px; }.integration-health-score b { color: #4d8060; font-size: 12px; }.integration-health-score small { color: #969ba3; font-size: 7px; }
.integration-health-pane dl { display: grid; gap: 0; margin: 20px 0; }.integration-health-pane dl div { display: flex; justify-content: space-between; padding: 12px 2px; border-bottom: 1px solid #e5e7e9; }.integration-health-pane dt { color: #9298a1; font-size: 7px; }.integration-health-pane dd { margin: 0; font-size: 7px; font-weight: 700; }.integration-health-pane ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }.integration-health-pane li { position: relative; display: flex; min-height: 58px; gap: 10px; color: #7e858e; }.integration-health-pane li:not(:last-child)::after { position: absolute; top: 13px; bottom: 0; left: 4px; width: 1px; background: #dadddf; content: ""; }.integration-health-pane li > i { position: relative; z-index: 1; width: 9px; height: 9px; margin-top: 3px; border: 2px solid #fff; border-radius: 50%; background: #4b8b64; box-shadow: 0 0 0 1px #9bc3aa; }.integration-health-pane li span { display: grid; align-content: start; gap: 4px; }.integration-health-pane li b { font-size: 8px; }.integration-health-pane li small { color: #969ba3; font-size: 6px; }.integration-health-pane li.is-new { color: #303841; }

.integration-principles { padding: 155px 5vw; background: #fff; }.integration-principles .section-inner,.integration-directory .section-inner { width: min(1260px,92vw); }
.integration-section-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,410px); align-items: end; gap: 20px 70px; }.integration-section-heading > span { grid-column: 1 / -1; color: #587897; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }.integration-section-heading h2 { margin: 0; font-size: clamp(57px,6vw,94px); font-weight: 650; line-height: .89; letter-spacing: -.067em; }.integration-section-heading h2 em { color: #5a5a5f; font-style: normal; }.integration-section-heading > p { margin: 0 0 5px; color: #77777d; font-size: 16px; line-height: 1.55; }
.integration-principle-grid { display: grid; margin-top: 78px; grid-template-columns: repeat(3,1fr); gap: 15px; }.integration-principle-grid > article { position: relative; min-height: 440px; padding: 28px; border: 1px solid rgba(29,29,31,.05); border-radius: 29px; background: #f3f5f7; overflow: hidden; }.integration-principle-grid > article:nth-child(2) { background: #eef3f0; }.integration-principle-grid > article:nth-child(3) { background: #f2eff3; }.integration-principle-grid > article > span { color: #5b7794; font-size: 10px; font-weight: 700; }.integration-principle-grid h3 { margin: 76px 0 12px; font-size: clamp(27px,2.2vw,35px); letter-spacing: -.05em; }.integration-principle-grid p { max-width: 350px; margin: 0; color: #77777d; font-size: 13px; line-height: 1.5; }
.permission-mini,.health-mini-large,.integration-audit-mini { position: absolute; right: 22px; bottom: 22px; left: 22px; min-height: 110px; padding: 16px; border: 1px solid rgba(29,29,31,.07); border-radius: 17px; background: rgba(255,255,255,.82); box-shadow: 0 16px 40px rgba(29,29,31,.05); }.permission-mini { display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 8px; }.permission-mini i { display: grid; width: 24px; height: 24px; color: #4d8060; border-radius: 8px; background: #e9f3ec; font-size: 8px; font-style: normal; place-items: center; }.permission-mini b { font-size: 8px; }.permission-mini em { color: #4d8060; font-size: 7px; font-style: normal; }.permission-mini em.is-off { color: #999fa7; }
.health-mini-large { display: flex; align-items: center; justify-content: space-between; }.health-mini-large strong { font-size: 42px; letter-spacing: -.06em; }.health-mini-large strong small { color: #4e805e; font-size: 13px; }.health-mini-large span { display: flex; align-items: center; gap: 7px; color: #828992; font-size: 7px; }.health-mini-large span i { width: 7px; height: 7px; border-radius: 50%; background: #36a36d; }
.integration-audit-mini { display: grid; align-content: center; gap: 0; margin: 0; list-style: none; }.integration-audit-mini li { display: grid; grid-template-columns: 9px 1fr; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid rgba(29,29,31,.07); }.integration-audit-mini li:first-child { border-top: 0; }.integration-audit-mini li > i { width: 8px; height: 8px; border-radius: 50%; background: #4d8b64; }.integration-audit-mini li span { display: flex; justify-content: space-between; }.integration-audit-mini b { font-size: 8px; }.integration-audit-mini small { color: #999fa7; font-size: 7px; }

.integration-directory { padding: 145px 5vw 170px; background: #f5f5f7; }.integration-section-heading.compact { grid-template-columns: 1fr; }.integration-section-heading.compact h2 { max-width: 950px; }
.integration-directory-grid { display: grid; margin-top: 75px; grid-template-columns: repeat(4,1fr); gap: 13px; }.integration-directory-grid article { display: grid; min-height: 152px; grid-template-columns: 48px 1fr; align-content: center; align-items: center; gap: 15px; padding: 21px; border: 1px solid rgba(29,29,31,.07); border-radius: 22px; background: #fff; transition: transform .25s ease,box-shadow .25s ease; }.integration-directory-grid article:hover { box-shadow: 0 20px 48px rgba(29,29,31,.08); transform: translateY(-4px); }.directory-logo { display: grid; width: 46px; height: 46px; color: #fff; border-radius: 14px; font-size: 11px; font-style: normal; font-weight: 700; place-items: center; }.integration-directory-grid article > span { display: grid; gap: 4px; }.integration-directory-grid b { font-size: 11px; }.integration-directory-grid small { color: #959aa2; font-size: 7px; }.integration-directory-grid article > em { grid-column: 2; color: #5f7e6b; font-size: 7px; font-style: normal; }.web-dir { color: #fff; background: #24282d; }.webhook-dir { color: #4e6e90; background: #e8eff6; }.integration-directory-grid .directory-custom { border-style: dashed; background: rgba(255,255,255,.55); }.directory-custom > i { display: grid; width: 46px; height: 46px; color: #555d66; border: 1px solid #dfe2e6; border-radius: 14px; background: #fff; font-size: 19px; font-style: normal; place-items: center; }
.directory-logo.has-logo { padding: 5px; border: 1px solid #e1e4e7; background: #fff; overflow: hidden; }.directory-logo.has-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 1120px) {
  .integrations-hero { min-height: 730px; grid-template-columns: 1fr 1fr; gap: 30px; }.integrations-hero-copy h1 { font-size: clamp(57px,7vw,82px); }.integrations-hero-scene { height: 570px; }.integrations-trust { display: none; }
  .integration-live-grid { grid-template-columns: 240px 1fr; }.integration-health-pane { display: none; }
  .integration-directory-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 760px) {
  .integrations-hero { width: calc(100% - 18px); min-height: auto; margin-top: 55px; margin-bottom: 65px; grid-template-columns: 1fr; }.integrations-hero-copy { padding: 25px 10px; text-align: center; }.integrations-hero-copy h1 { margin: 0 auto; font-size: clamp(53px,15vw,76px); }.integrations-hero-copy > p:not(.page-kicker) { font-size: 17px; }.integrations-hero-copy .page-actions { justify-content: center; }.integrations-hero-scene { height: 480px; border-radius: 29px; }.integrations-hero-scene > img { right: -27%; bottom: 3%; width: 154%; }.integration-brand-card { min-width: 155px; padding: 9px; }.brand-mark { width: 34px; height: 34px; }.hero-wa { top: 20px; left: 17px; }.hero-ig { top: 95px; right: 14px; }.hero-calendar,.integrations-hero-scene figcaption { display: none; }
  .integration-showcase { width: calc(100% - 16px); padding: 35px 8px 8px; border-radius: 28px; }.integration-showcase-heading { display: block; padding: 0 9px; }.integration-showcase-heading > p { width: auto; margin-top: 20px; }.integration-workspace { border-radius: 19px; }.integration-live-grid { grid-template-columns: 1fr; min-height: 665px; }.integration-source-pane { display: none; }.integration-map-pane > header { align-items: stretch; flex-direction: column; }.integration-map-pane > header .feature-primary { width: 100%; }.integration-map { min-height: 535px; padding: 26px 13px; }.integration-output-grid { margin-top: 35px; }.integration-output-grid article { min-height: 108px; grid-template-columns: 1fr; text-align: center; justify-items: center; }.integration-output-grid article > em { grid-column: 1; }.integration-source-card { width: 94%; }.integration-core-card { width: 86%; }
  .integration-principles,.integration-directory { padding: 95px 12px; }.integration-section-heading { display: block; }.integration-section-heading > span { display: block; margin-bottom: 18px; }.integration-section-heading h2 { font-size: clamp(52px,14.5vw,76px); }.integration-section-heading > p { margin-top: 25px; }.integration-principle-grid { margin-top: 48px; grid-template-columns: 1fr; }.integration-principle-grid > article { min-height: 400px; }
  .integration-directory-grid { margin-top: 48px; grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .integrations-hero-scene > img,.integration-brand-card { animation: none !important; }
}

/* Pricing studio */
.pricing-page { --pricing-blue: #456f9f; --pricing-sage: #71897c; --pricing-violet: #756882; }
.pricing-hero { display: grid; width: min(1420px,calc(100% - 40px)); min-height: 830px; margin: 0 auto 80px; padding: 78px clamp(20px,4vw,64px) 34px; grid-template-columns: .88fr 1.12fr; align-items: center; gap: clamp(35px,5vw,85px); }
.pricing-hero-copy h1 { max-width: 780px; margin: 0; font-size: clamp(68px,6.5vw,108px); font-weight: 650; line-height: .9; letter-spacing: -.068em; }
.pricing-hero-copy h1 span { color: #55555a; }
.pricing-hero-copy > p:not(.page-kicker) { max-width: 650px; margin: 30px 0 0; color: #74747a; font-size: clamp(18px,1.5vw,23px); line-height: 1.48; letter-spacing: -.025em; }
.pricing-hero-copy .page-actions { justify-content: flex-start; }
.pricing-trust { display: flex; flex-wrap: wrap; gap: 10px 23px; margin-top: 43px; color: #737379; font-size: 10px; }
.pricing-trust span { display: flex; align-items: center; gap: 7px; }
.pricing-trust i { width: 7px; height: 7px; border-radius: 50%; background: #34a36c; box-shadow: 0 0 0 4px rgba(52,163,108,.1); }
.pricing-family { position: relative; display: flex; min-width: 0; min-height: 560px; margin: 0; align-items: center; justify-content: center; overflow: visible; }
.pricing-family img { display: block; width: 100%; max-width: 920px; height: auto; animation: pricingFamilyIn 1.2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pricingFamilyIn { from { opacity: 0; transform: translateY(38px) scale(.975); } to { opacity: 1; transform: none; } }

.pricing-plans { padding: 145px 4vw 165px; background: #f5f5f7; scroll-margin-top: 80px; }
.pricing-plans .section-inner,.pricing-builder .section-inner,.pricing-outcome .section-inner { width: min(1340px,94vw); }
.pricing-section-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(290px,430px); align-items: end; gap: 30px 70px; }
.pricing-section-heading > div > span { display: block; margin-bottom: 15px; color: #547494; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.pricing-section-heading h2 { margin: 0; font-size: clamp(58px,6.2vw,96px); font-weight: 650; line-height: .89; letter-spacing: -.068em; }
.pricing-section-heading h2 em { color: #5b5b60; font-style: normal; }
.pricing-section-heading > p { margin: 0 0 6px; color: #77777d; font-size: 16px; line-height: 1.55; }
.pricing-section-heading.compact { grid-template-columns: minmax(0,1fr) minmax(290px,430px); }
.pricing-plan-grid { display: grid; margin-top: 78px; grid-template-columns: repeat(4,1fr); gap: 12px; align-items: stretch; }
.pricing-plan-card { position: relative; display: flex; min-height: 690px; padding: 25px; flex-direction: column; border: 1px solid rgba(29,29,31,.08); border-radius: 28px; background: #fff; box-shadow: 0 18px 45px rgba(29,29,31,.035); overflow: hidden; transition: transform .28s ease,box-shadow .28s ease; }
.pricing-plan-card:hover { box-shadow: 0 28px 65px rgba(29,29,31,.09); transform: translateY(-6px); }
.pricing-plan-card.is-featured { color: #fff; border-color: #1d1d1f; background: #1d1d1f; box-shadow: 0 28px 70px rgba(29,29,31,.2); }
.pricing-plan-card.is-featured::before { position: absolute; inset: 0; background: radial-gradient(circle at 85% 8%,rgba(83,126,176,.3),transparent 31%); content: ""; pointer-events: none; }
.pricing-plan-card.is-enterprise { background: #eef1f4; }
.pricing-plan-card > * { position: relative; z-index: 1; }
.pricing-plan-card header { display: flex; align-items: center; justify-content: space-between; }
.pricing-plan-card header span { display: grid; width: 38px; height: 38px; color: #527293; border-radius: 12px; background: #edf2f7; font-size: 10px; font-weight: 700; place-items: center; }
.pricing-plan-card header small { color: #8c8c92; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.pricing-plan-card.is-featured header span { color: #fff; background: #456f9f; }
.pricing-plan-card.is-featured header small { color: #a9bfd6; }
.pricing-plan-card h3 { margin: 58px 0 12px; font-size: clamp(31px,2.6vw,42px); line-height: 1; letter-spacing: -.052em; }
.pricing-plan-card > p { min-height: 86px; margin: 0; color: #77777d; font-size: 13px; line-height: 1.52; }
.pricing-plan-card.is-featured > p { color: #b9b9bf; }
.pricing-conversation { display: grid; min-height: 134px; margin-top: 23px; align-content: center; gap: 4px; padding: 18px; border: 1px solid rgba(29,29,31,.07); border-radius: 18px; background: #f5f5f7; }
.pricing-plan-card.is-featured .pricing-conversation { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.07); }
.pricing-conversation small { color: #929297; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.pricing-conversation strong { font-size: clamp(20px,1.7vw,27px); letter-spacing: -.04em; }
.pricing-conversation span { color: #8b8b91; font-size: 8px; }
.pricing-plan-card.is-featured .pricing-conversation span,.pricing-plan-card.is-featured .pricing-conversation small { color: #a9a9af; }
.pricing-plan-card > a { display: flex; min-height: 48px; margin-top: 10px; align-items: center; justify-content: space-between; padding: 0 16px; color: #fff; border-radius: 13px; background: #1d1d1f; font-size: 10px; font-weight: 700; }
.pricing-plan-card.is-featured > a { color: #1d1d1f; background: #fff; }
.pricing-plan-card ul { display: grid; gap: 12px; margin: 30px 0 0; padding: 25px 0 0; border-top: 1px solid rgba(29,29,31,.08); list-style: none; }
.pricing-plan-card.is-featured ul { border-color: rgba(255,255,255,.12); }
.pricing-plan-card li { position: relative; padding-left: 19px; color: #68686e; font-size: 10px; line-height: 1.4; }
.pricing-plan-card.is-featured li { color: #c8c8cd; }
.pricing-plan-card li::before { position: absolute; top: 1px; left: 0; display: grid; width: 13px; height: 13px; color: #4f7b61; border-radius: 50%; background: #e9f3ec; content: "✓"; font-size: 7px; font-weight: 700; place-items: center; }
.pricing-plan-card.is-featured li::before { color: #fff; background: #456f9f; }

.pricing-builder { padding: 150px 4vw 165px; background: #fff; }
.pricing-builder-shell { display: grid; margin-top: 75px; grid-template-columns: minmax(0,1.45fr) minmax(330px,.55fr); gap: 15px; }
.pricing-builder-steps { display: grid; gap: 10px; }
.pricing-builder fieldset { margin: 0; padding: 25px; border: 1px solid rgba(29,29,31,.08); border-radius: 24px; background: #f7f7f8; }
.pricing-builder legend { display: flex; padding: 0; align-items: center; gap: 12px; }
.pricing-builder legend span { display: grid; width: 31px; height: 31px; color: #527293; border-radius: 10px; background: #e9eff5; font-size: 9px; place-items: center; }
.pricing-builder legend b { font-size: 15px; letter-spacing: -.02em; }
.pricing-builder fieldset > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 19px; }
.pricing-builder fieldset button { min-height: 42px; padding: 0 15px; color: #66666c; border: 1px solid rgba(29,29,31,.08); border-radius: 999px; background: #fff; font-size: 9px; cursor: pointer; transition: color .2s ease,border .2s ease,background .2s ease,transform .2s ease; }
.pricing-builder fieldset button:hover { transform: translateY(-2px); }
.pricing-builder fieldset button.is-selected { color: #fff; border-color: #1d1d1f; background: #1d1d1f; }
.pricing-builder-result { position: sticky; top: 95px; display: flex; min-height: 470px; padding: 31px; flex-direction: column; color: #fff; border-radius: 28px; background: #1d1d1f; box-shadow: 0 28px 70px rgba(29,29,31,.16); }
.pricing-builder-result::before { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 85% 12%,rgba(69,111,159,.35),transparent 34%); content: ""; pointer-events: none; }
.pricing-builder-result > * { position: relative; z-index: 1; }
.pricing-builder-result > small { color: #9eb6cf; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.pricing-builder-result > strong { margin-top: 20px; font-size: clamp(48px,4.5vw,70px); line-height: .9; letter-spacing: -.06em; }
.pricing-builder-result > p { min-height: 60px; margin: 20px 0; color: #b8b8be; font-size: 12px; line-height: 1.5; }
.pricing-builder-result dl { display: grid; margin: 0; }
.pricing-builder-result dl div { display: flex; justify-content: space-between; gap: 15px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.12); }
.pricing-builder-result dt { color: #8d8d94; font-size: 8px; }
.pricing-builder-result dd { margin: 0; text-align: right; font-size: 8px; font-weight: 700; }
.pricing-builder-result > a { display: flex; min-height: 52px; margin-top: auto; align-items: center; justify-content: space-between; padding: 0 17px; color: #1d1d1f; border-radius: 14px; background: #fff; font-size: 10px; font-weight: 700; }
.pricing-builder-result > em { margin-top: 12px; color: #8f8f96; text-align: center; font-size: 7px; font-style: normal; }

.pricing-outcome { padding: 145px 4vw 155px; background: #f5f5f7; }
.pricing-outcome-grid { display: grid; margin-top: 75px; grid-template-columns: repeat(4,1fr); gap: 12px; }
.pricing-outcome-grid article { min-height: 270px; padding: 25px; border: 1px solid rgba(29,29,31,.07); border-radius: 25px; background: #fff; }
.pricing-outcome-grid article i { display: grid; width: 37px; height: 37px; color: #4c7d5e; border-radius: 12px; background: #eaf3ed; font-size: 11px; font-style: normal; place-items: center; }
.pricing-outcome-grid h3 { margin: 74px 0 10px; font-size: clamp(22px,1.8vw,29px); line-height: 1; letter-spacing: -.045em; }
.pricing-outcome-grid p { margin: 0; color: #79797f; font-size: 11px; line-height: 1.5; }
.pricing-outcome-note { margin: 14px 0 0; padding: 17px 21px; color: #808086; border: 1px solid rgba(29,29,31,.07); border-radius: 17px; background: rgba(255,255,255,.72); font-size: 10px; }
.pricing-outcome-note span { margin-right: 11px; color: #4d7e5e; font-weight: 700; }
.pricing-cta-note { display: block; margin-top: 17px; color: #77777d; font-size: 9px; }

@media (max-width: 1120px) {
  .pricing-hero { min-height: 750px; grid-template-columns: 1fr 1fr; gap: 30px; }
  .pricing-hero-copy h1 { font-size: clamp(58px,7vw,82px); }
  .pricing-family { min-height: 500px; }
  .pricing-plan-grid { grid-template-columns: repeat(2,1fr); }
  .pricing-plan-card { min-height: 650px; }
  .pricing-outcome-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 760px) {
  .pricing-hero { width: calc(100% - 18px); min-height: auto; margin-top: 55px; margin-bottom: 70px; padding: 25px 10px; grid-template-columns: 1fr; }
  .pricing-hero-copy { text-align: center; }
  .pricing-hero-copy h1 { margin: 0 auto; font-size: clamp(52px,15vw,76px); }
  .pricing-hero-copy > p:not(.page-kicker) { font-size: 17px; }
  .pricing-hero-copy .page-actions { justify-content: center; }
  .pricing-trust { display: none; }
  .pricing-family { min-height: 360px; }
  .pricing-family img { width: 100%; }
  .pricing-plans,.pricing-builder,.pricing-outcome { padding: 95px 12px; }
  .pricing-section-heading,.pricing-section-heading.compact { display: block; }
  .pricing-section-heading h2 { font-size: clamp(51px,14.5vw,75px); }
  .pricing-section-heading > p { margin-top: 25px; }
  .pricing-plan-grid { margin-top: 48px; grid-template-columns: 1fr; }
  .pricing-plan-card { min-height: 630px; }
  .pricing-builder-shell { margin-top: 48px; grid-template-columns: 1fr; }
  .pricing-builder-result { position: relative; top: auto; min-height: 440px; }
  .pricing-builder fieldset { padding: 20px; }
  .pricing-builder fieldset > div { display: grid; grid-template-columns: 1fr; }
  .pricing-outcome-grid { margin-top: 48px; grid-template-columns: 1fr; }
  .pricing-outcome-grid article { min-height: 250px; }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-family img { animation: none !important; }
}