@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;550;600;700&display=swap');

/* AffectUI Classic materials at marketing scale. All tokens are scoped below
   the hero; the terrain, headline, header, and their motion stay independent. */
.home-content {
  --paper: #fafafa;
  --ink: #171717;
  --body: #525252;
  --surface: #f0f0f0;
  --rule: #e5e5e5;
  --classic-white: #fff;
  --classic-inset: #f7f7f7;
  --classic-text: #404040;
  --classic-muted: #6b6b6b;
  --classic-divider: #ececec;
  --classic-blue: #2f6bff;
  --classic-blue-soft: #eef3ff;
  --classic-success: #15803d;
  --classic-danger: #db343b;
  --classic-ui: 'Inter', sans-serif;
  --classic-contact: 0 1px 2px rgb(0 0 0 / .06);
  --classic-selected: 0 0 0 .5px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .08), 0 2px 8px -2px rgb(0 0 0 / .06);
  --classic-node: 0 0 0 1px rgb(0 0 0 / .06), 0 1px 2px rgb(0 0 0 / .06), 0 6px 12px -8px rgb(0 0 0 / .12);
  --classic-primary: linear-gradient(180deg, #323137, #201e25);
  --classic-primary-edge: inset 0 1px 0 #4b4951, inset 0 -1px 0 #18171b, 0 0 0 1px #0d0d0d, 0 1px 2px rgb(0 0 0 / .12);
  --classic-ease: cubic-bezier(.22, 1, .36, 1);
  background: var(--paper);
  color: var(--ink);
}

/* Keep the editorial type; use the platform's compact Inter roles in its UI. */
.home-content :is(.ui-lyr-menu, .team-invite-visual, .ui-ib, .ui-ag, .it-controls-tabs, .it-control-beam, .ui-pf-deployment, .enterprise-app-groups, .text-link, .associate-principles, .site-footer nav, .footer-bottom) {
  font-family: var(--classic-ui);
}
.home-content .text-link { border-color: var(--rule); color: var(--classic-text); }
.home-content :is(.text-link, button, [tabindex]):focus-visible {
  outline: 2px solid var(--classic-blue);
  outline-offset: 4px;
}
.home-content .associate-principles { border-color: var(--rule); color: var(--classic-text); }
.home-content :is(.stack-panel, .it-controls-copy) li::before { background: var(--classic-muted); }

/* The layer selector uses Classic's gray tray and raised white selection.
   Six-pixel insets are retained for its measured sliding indicator. */
.home-content .ui-lyr { --ui-lyr-accent: var(--classic-blue); --ui-lyr-edge: rgb(0 0 0 / .1); --ui-lyr-side: #ececec; --ui-lyr-side-above: #ececec88; }
.home-content .ui-lyr-menu { background: var(--surface); border-radius: 22px; }
.home-content .ui-lyr-pill { border-radius: 16px; background: var(--classic-white); box-shadow: var(--classic-selected); }
.home-content .ui-lyr-row { border-radius: 16px; }
.home-content .ui-lyr-title { display: flex; align-items: center; gap: 8px; }
.home-content .ui-lyr-row svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.home-content .ui-lyr-row .ui-lyr-hint { padding-left: 24px; }
.home-content .ui-lyr-row:focus-visible { outline-offset: -2px; }
.home-content .ui-lyr-row[aria-selected=true] .ui-lyr-title { color: var(--classic-blue); }
.home-content .ui-lyr-hint { color: var(--body); font-size: 12px; }

/* Team Invite stays an open organizational canvas. Its team frames use the
   same dark Classic tray and working surface as the control diagrams. */
.home-content .ui-ti {
  --ui-ti-line-a: #d6d6dc;
  --ui-ti-line-b: #d2dce8;
  --ui-ti-dash: #ffffff33;
  --ui-ti-plus: #8f8f8f;
  --ui-ti-cursor: #171717;
  --ui-ti-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) #0000000f, 0 calc(6 * var(--u)) calc(12 * var(--u)) calc(-8 * var(--u)) #00000020;
}
.home-content .ui-ti-team-frame { fill: #161618; stroke: #ffffff1a; filter: drop-shadow(0 1px 2px #00000020) drop-shadow(0 5px 8px #0000000c); }
.home-content .ui-ti-team-surface { fill: #232326; stroke: #ffffff1a; stroke-width: 1; }
.home-content .ui-ti-label { font-weight: 500; color: var(--classic-text); }
.home-content .ui-ti-team-one-label { top: calc(207 * var(--u)); color: #ededed; }
.home-content .ui-ti-team-two-label { top: calc(442 * var(--u)); color: #ededed; }
.home-content .ui-ti .it-beam-nameplate { width: max(calc(104 * var(--u)), 80px); }

/* Shared diagram materials. Large working surfaces use a 6/22/16 frame;
   circular people, pill requests, and square application nodes keep their form. */
.home-content :is(.ui-ib, .it-control-beam) {
  --beam-line: #dedee3;
  --beam-ring: #2f6bff2b;
  --beam-glow: #369fff0e;
  --it-node-border: #e5e5e5;
  --it-node-shadow: var(--classic-node);
  border: 6px solid var(--surface);
  border-radius: 22px;
  background: var(--classic-white);
  box-shadow: inset 0 0 0 1px var(--classic-divider);
}
.home-content .ui-ib { margin-top: 32px; padding: 26px 42px 25px; }
.home-content .ui-ib__caption {
  margin: 0 0 44px;
  min-height: 24px;
  max-width: none;
  color: var(--ink);
  font-size: 17px;
  font-weight: 550;
  line-height: 1.4;
  letter-spacing: -.02em;
  text-align: center;
}
.home-content .it-control-beam { padding: 18px 12px 16px; }
.home-content .it-control-beam::before {
  inset: 1px;
  border-radius: 16px;
  background-image: radial-gradient(circle at 1px 1px, #e5e5e5 .7px, transparent .8px);
  opacity: .55;
}
.home-content :is(.ui-ib__tile, .it-beam-face, .it-beam-tool-icon) { background: var(--classic-white); box-shadow: var(--classic-node); }
.home-content :is(.ui-ib__label, .it-beam-check-reason, .it-beam-tool>span:last-child, .it-beam-reviewer strong, .it-beam-reviewer small) { background: var(--classic-white); }
.home-content :is(.ui-ib__center, .it-beam-hub) {
  background: var(--classic-primary);
  box-shadow: var(--classic-primary-edge);
  color: #fafafa;
}
.home-content .ui-ib [data-current]>.ui-ib__tile { box-shadow: 0 0 0 2px var(--beam-ring), var(--classic-contact); }
.home-content .ui-ib [data-current]>.ui-ib__label { color: var(--classic-blue); }
.home-content :is(.it-beam-check-label, .it-beam-request-body, .it-beam-log, .it-beam-owner) { border-color: var(--rule); box-shadow: var(--classic-node); }
.home-content :is(.it-beam-log, .it-beam-owner) { border-radius: 16px; }
.home-content .it-beam-check-icon { color: var(--classic-muted); }
.home-content .it-beam-send { background: var(--classic-primary); box-shadow: var(--classic-primary-edge); }
.home-content .it-beam-log ol::before { background: var(--classic-divider); }
.home-content .it-beam-log li::before { background: var(--classic-blue); }
.home-content .it-beam-log-reason { border-color: var(--classic-divider); color: var(--classic-danger); }
.home-content .it-beam-owner-action { background: var(--classic-inset); border-color: var(--rule); border-radius: 10px; }
.home-content .it-beam-decision { min-height: 32px; border-radius: 10px; background: var(--classic-success); border-color: var(--classic-success); box-shadow: inset 0 1px 0 #ffffff22, var(--classic-contact); }
.home-content .it-beam-decision[data-decision=decline] { background: var(--classic-danger); border-color: var(--classic-danger); }
.home-content .it-beam-decision:not(:disabled):hover { box-shadow: inset 0 0 0 30px #ffffff15, var(--classic-contact); }
.home-content .it-beam-reviewer[data-decision=accept] small { color: var(--classic-success); }
.home-content .it-beam-reviewer[data-decision=decline] small { color: var(--classic-danger); }

/* The same state language everywhere; saturated only while doing or resolving
   work. Existing loading spinners, timing, and human decisions are retained. */
.home-content .it-beam-result { background: var(--surface); border-color: var(--rule); box-shadow: var(--classic-contact); color: var(--body); font-weight: 450; }
.home-content .it-beam-result:is([data-result=processing], [data-result=working], [data-result=checking]) { background: var(--classic-blue); border-color: var(--classic-blue); color: #fff; }
.home-content .it-beam-result:is([data-result=completed], [data-result=complete], [data-result=pass]) { background: var(--classic-success); border-color: var(--classic-success); color: #fff; }
.home-content .it-beam-result:is([data-result=blocked], [data-result=revoked]) { background: var(--classic-danger); border-color: var(--classic-danger); color: #fff; }
.home-content .it-beam-result[data-result=review] { background: #926514; border-color: #926514; color: #fff; }
.home-content .it-beam-nameplate { filter: drop-shadow(0 1px 2px #0000000f) drop-shadow(0 3px 5px #00000006); }
.home-content .it-beam-nameplate::before { background: var(--rule); }

/* Match the supplied off-white section sample around the dark diagrams. */
.home-content .enterprise-controls-section { background: #f9f9f9; }

/* Enterprise control diagrams use the platform's dark Classic canvas and
   tray. Keep the existing light nodes, identity plates, and status colors. */
.home-content .it-control-beam {
  --control-canvas: #29292e;
  --control-tray: #161618;
  --control-edge: rgb(255 255 255 / .1);
  --control-text: #d4d4d8;
  --beam-line: #62626d;
  --beam-ring: #6b95ff55;
  border-color: var(--control-tray);
  background: var(--control-canvas);
  box-shadow: inset 0 0 0 1px var(--control-edge), 0 1px 2px #00000024, 0 14px 28px -18px #00000055;
}
.home-content .it-control-beam::before {
  background-image: radial-gradient(circle at 1px 1px, #ffffff20 .7px, transparent .8px);
  opacity: .7;
}
.home-content .it-control-beam .it-beam-request-name,
.home-content .it-control-beam .it-beam-caption { color: var(--control-text); }
.home-content .it-control-beam :is(.it-beam-check-reason, .it-beam-tool>span:last-child, .it-beam-reviewer strong, .it-beam-reviewer small) {
  background: var(--control-canvas);
  color: var(--control-text);
}
.home-content .it-control-beam .it-beam-reviewer strong { color: #ededed; }
.home-content .it-control-beam .it-beam-request[aria-pressed=false] .it-beam-request-body {
  background: #b4b4b6;
  border-color: #a3a3a5;
  color: #1d1d1f;
}
.home-content .it-control-beam .it-beam-request[aria-pressed=false] .it-beam-send { color: #b4b4b6; }
.home-content .it-control-beam .it-beam-reviewer[data-decision=accept] small { color: #7ed6a2; }
.home-content .it-control-beam .it-beam-reviewer[data-decision=decline] small { color: #ff6b6b; }
.home-content .it-control-beam .it-beam-hub {
  box-shadow: inset 0 1px 0 #4b4951, 0 0 0 1px #ffffff26, 0 4px 12px #00000033;
}
.home-content .it-control-beam .it-beam-hub[data-lit] {
  box-shadow: inset 0 1px 0 #4b4951, 0 0 0 3px var(--beam-ring), 0 0 24px 2px #369fff18;
}
.home-content .it-control-beam .it-beam-hub[data-blocked] {
  box-shadow: inset 0 1px 0 #4b4951, 0 0 0 2px #ff6b6b55, 0 4px 12px #00000033;
}

/* Quiet spectrum washes sit inside white Classic frames on charcoal.
   The panel border is a grouping gutter, not a heavy outline. */
.home-content .governance-section { background: #29292e; color: #fafafa; }
.home-content .governance-section p { color: #d4d4d8; }
.home-content .governance-section .section-label { color: #e0dfe5; }
.home-content .governance-heading,
.home-content .integration-section .section-heading-row,
.home-content .it-controls-heading { grid-template-columns: 1fr; align-items: start; gap: 16px; }
.home-content .governance-heading>p,
.home-content .integration-section .section-heading-row>p,
.home-content .it-controls-heading>p { width: 100%; max-width: none; padding-bottom: 0; }
.home-content .ui-ag { color: var(--ink); margin-top: 32px; }
.home-content .it-controls-explorer { margin-top: 32px; }
.home-content .ui-ag__panel {
  --ag-a-at: 0% 0%;
  --ag-b-at: 100% 100%;
  --ag-c-at: 100% 0%;
  border: 6px solid var(--surface);
  border-radius: 22px;
  background: #fff;
}
.home-content .ui-ag__panel[data-team=accounting] { --ag-a-at: 100% 0%; --ag-b-at: 0% 100%; --ag-c-at: 50% 0%; }
.home-content .ui-ag__panel[data-team=operations] { --ag-a-at: 0% 100%; --ag-b-at: 100% 0%; --ag-c-at: 100% 100%; }
.home-content .ui-ag__panel[data-team=sales] { --ag-c-at: 0% 100%; }
.home-content .ui-ag__panel[data-team=support] { --ag-a-at: 100% 100%; --ag-b-at: 0% 0%; }
.home-content .ui-ag__art {
  border-radius: 16px;
  opacity: 1;
  background:
    radial-gradient(ellipse 90% 100% at var(--ag-a-at), color-mix(in srgb, var(--a) 48%, transparent), transparent 72%),
    radial-gradient(ellipse 85% 95% at var(--ag-b-at), color-mix(in srgb, var(--b) 44%, transparent), transparent 72%),
    radial-gradient(ellipse 65% 85% at var(--ag-c-at), color-mix(in srgb, var(--c) 28%, transparent), transparent 75%),
    linear-gradient(140deg, #fff, #fcfcfc);
  filter: saturate(.85);
}
.home-content .ui-ag__panel[data-far] .ui-ag__art { filter: saturate(.65); }
.home-content .ui-ag__panel[data-open] .ui-ag__art { filter: none; }
.home-content .ui-ag__preview { width: calc(var(--ui-ag-open) - 12px); }
.home-content .ui-ag .ui-at {
  --ui-at-text: #171717;
  --ui-at-caret: #171717;
  --ui-at-accent: #171717;
  --ui-at-surface: #fff;
  --ui-at-dash: #d2d2d9;
  --ui-at-halo-from: #ff456718;
  --ui-at-halo-to: #369fff18;
  --ui-at-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) #0000000f, 0 calc(6 * var(--u)) calc(12 * var(--u)) calc(-8 * var(--u)) #00000020;
}
.home-content .ui-ag__title { color: var(--ink); }
.home-content .governance-section .ui-ag__description { color: var(--body); }
.home-content .ui-ag__label { color: var(--classic-text); }
.home-content .ui-ag__arrows { border: 4px solid var(--surface); border-radius: 16px; background: #fff; box-shadow: none; }
.home-content .ui-ag__arrows button { width: 44px; height: 40px; background: #fff; }
.home-content .ui-ag__arrows button+button { border-color: var(--classic-divider); }
.home-content .ui-ag__arrows button:hover { background: var(--classic-inset); }
.home-content .ui-ag__arrows button:active { background: var(--surface); }

/* Two-line horizontal tabs use raised selection, soft metadata, and blue
   focus. Preserve the mobile arrows and the measured indicator geometry. */
.home-content .it-controls-tabs.ui-seg { --ui-seg-tray: #e9e9e9; --ui-seg-pill: #fff; --ui-seg-ink: var(--classic-blue); --ui-seg-focus: #2f6bff; font-family: var(--classic-ui); }
.home-content .it-controls-tabs .ui-seg__label { grid-template-columns: 16px auto; align-items: center; column-gap: 7px; }
.home-content .it-controls-tabs .ui-seg__text { grid-area: 1 / 2; }
.home-content .it-controls-tabs .ui-seg__icon { grid-area: 1 / 1; width: 16px; height: 16px; }
.home-content .it-controls-tabs .ui-seg__icon svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.home-content .it-controls-tabs .ui-seg__description { color: var(--body); }
.home-content .it-tab-scroll-icon { border-color: var(--rule); background: #fff; box-shadow: var(--classic-contact); }

/* The full logo wall retains its original falloff and reveal. */
.home-content .enterprise-integrations-section { background: #eee; }
.home-content .enterprise-app-grid { --ui-ig-border-a: .09; --ui-ig-center: #232326; --ui-ig-center-border: #ffffff1a; --ui-ig-center-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) #00000024, 0 calc(8 * var(--u)) calc(16 * var(--u)) calc(-10 * var(--u)) #00000040; }
.home-content .enterprise-app-grid .ui-ig-tile--center { background: var(--classic-primary); }
.home-content .enterprise-app-grid .ui-ig-mark { filter: brightness(0) invert(1); }
.home-content .enterprise-app-groups h3 { font-weight: 500; color: var(--classic-text); }


/* Only this button changes: the hero's header button and both terrain
   renderers are deliberately outside these selectors. */
.home-content .book-demo.demo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: linear-gradient(#fff, #fafafa);
  color: #171717;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px #00000018;
  font: 500 14px/1 var(--classic-ui);
  letter-spacing: -.01em;
}
.home-content .closing-section { background: #080809; color: #fafafa; }
.home-content.site-footer nav, .home-content.site-footer .footer-bottom { font-family: var(--classic-ui); }

@media (max-width: 1050px) and (min-width: 741px) {
  .home-content .ui-lyr-hint { font-size: 10px; }
}
@media (max-width: 900px) and (min-width: 701px) {
  .home-content .ui-ib { padding-inline: 25px; }
}
@media (max-width: 740px) {
  .home-content .ui-ib, .home-content .ui-ag, .home-content .it-controls-explorer { margin-top: 24px; }
  .home-content .it-control-beam { padding: 12px 8px 16px; }
}
@media (max-width: 700px) {
  .home-content .ui-ib { padding: 24px 12px; }
  .home-content .ui-ib__caption { margin-bottom: 40px; font-size: 16px; }
}
@media (max-width: 600px) {
  .home-content .ui-ag__panel { border-width: 4px; border-radius: 20px; }
  .home-content .ui-ag__preview { width: calc(var(--ui-ag-open) - 8px); }
  .home-content .ui-ag__pick { padding-left: 5px; }
}
@media (max-width: 360px) {
  .home-content .it-control-beam { padding-inline: 4px; }
}