@font-face {
  font-family:"Source Sans Pro";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../login/assets/fonts/source-sans-pro-v11-latin-regular.woff2") format("woff2");
}

@font-face {
  font-family:"Source Sans Pro";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../login/assets/fonts/source-sans-pro-v11-latin-700.woff2") format("woff2");
}

@font-face {
  font-family:"Source Sans Pro";
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url("../login/assets/fonts/source-sans-pro-v11-latin-300.woff2") format("woff2");
}

:root {
  --brand:#08234c;
  --on-brand:#fff;
  --ink:var(--brand);
  --muted:#526374;
  --paper:#f2f0ed;
  --white:#fff;
  --line:#dce3e8;
  --blue:#edf3f8;
  --peach:#f7e9e2;
  --sage:#eaf0e6;
  --teal:#2f7e86;
  --accent:#7f57a8;
  --accent-hover:color-mix(in srgb,var(--accent) 85%,black);
  --accent-soft:color-mix(in srgb,var(--accent) 12%,white);
  --accent-light:color-mix(in srgb,var(--accent) 45%,white);
  --brand-soft:color-mix(in srgb,var(--brand) 5%,white);
  --brand-hover:color-mix(in srgb,var(--brand) 82%,black);
  --bh:#fac0be;
  --lv:#bff7f7;
  --ja:#c6dfb2;
  --wp:#ffe88c;
  --br:#bccceb;
  --radius:12px;
  --page-width:1240px;
}

/* theme.css is loaded after these defaults by the build template. */
[data-viewport-animation] {
  --illustration-play-state:paused;
}
[data-viewport-animation][data-animation-playing="true"] {
  --illustration-play-state:running;
}
[data-viewport-animation],
[data-viewport-animation] *,
[data-viewport-animation]::before,
[data-viewport-animation]::after,
[data-viewport-animation] *::before,
[data-viewport-animation] *::after {
  animation-play-state:var(--illustration-play-state)!important;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:112px;
}

body {
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:"Source Sans Pro","Segoe UI",sans-serif;
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

button,input,select,textarea {
  font:inherit;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:wait;
  opacity:.6;
}

button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px;
}

img,svg {
  display:block;
}

p,h1,h2,h3 {
  margin:0;
}

p {
  color:var(--muted);
}

h1,h2,h3 {
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.035em;
}

h2 {
  font-size:clamp(32px,3.35vw,46px);
}

h3 {
  font-size:25px;
  letter-spacing:-.025em;
}

p+p {
  margin-top:18px;
}

[hidden] {
  display:none!important;
}

.wrap {
  width:min(var(--page-width),calc(100% - 96px));
  margin-inline:auto;
}

.icon {
  width:22px;
  height:22px;
  flex:none;
}

.eyebrow {
  font-size:12px;
  font-weight:700;
  letter-spacing:.15em;
  line-height:1.6;
  color:var(--ink);
  margin-bottom:20px;
}

.tiny-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  flex:none;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:15px 23px;
  border:1px solid var(--brand);
  border-radius:6px;
  background:var(--brand);
  color:var(--on-brand);
  font-size:16px;
  font-weight:700;
  line-height:1.3;
  transition:background .2s,transform .2s;
}

.button:hover {
  background:var(--brand-hover);
  transform:translateY(-2px);
}

.button-secondary {
  background:transparent;
  color:var(--brand);
  border-color:color-mix(in srgb,var(--brand) 26%,transparent);
}

.button-secondary:hover {
  background:var(--brand-soft);
}

.button .icon {
  width:19px;
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:20px;
  font-size:16px;
  font-weight:700;
  line-height:1.4;
  padding-block:6px;
  color:var(--brand);
}

.text-link:hover {
  color:var(--accent-hover);
}

.text-link .icon {
  width:19px;
  transition:transform .2s;
}

.text-link:hover .icon {
  transform:translateX(4px);
}

.skip-link {
  position:fixed;
  top:8px;
  left:16px;
  z-index:100;
  background:var(--brand);
  color:var(--on-brand);
  padding:12px;
  transform:translateY(-150%);
}

.skip-link:focus {
  transform:none;
}

.site-header {
  position:sticky;
  top:0;
  background:var(--paper);
  z-index:30;
  border-bottom:1px solid color-mix(in srgb,var(--brand) 9%,transparent);
}

.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:88px;
  gap:40px;
}

.brand {
  display:inline-flex;
  flex:none;
}

.brand-crop {
  position:relative;
  overflow:hidden;
  width:168px;
  height:30px;
  display:block;
  mix-blend-mode:darken;
}

.brand img {
  position:absolute;
  max-width:none;
  width:295px;
  height:147.5px;
  left:-62.5px;
  top:-60px;
}

.animation-logo {
  display:block;
  position:relative;
  overflow:hidden;
  width:clamp(88px,24cqw,136px);
  max-width:100%;
  aspect-ratio:1148 / 160;
  mix-blend-mode:darken;
}

.animation-logo img {
  position:absolute;
  max-width:none;
  width:174.216%;
  height:auto;
  left:-37.108%;
  top:-256.25%;
  filter:brightness(1.08);
}

.animation-software-wordmark {
  display:inline-flex;
  align-items:center;
  gap:clamp(6px,1.6cqw,10px);
  font-size:clamp(16px,3.8cqw,23px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.03em;
  white-space:nowrap;
}

.animation-software-wordmark>span {
  font-size:.5em;
  font-weight:400;
  letter-spacing:0;
  color:var(--muted);
}

.main-nav {
  display:flex;
  align-items:center;
  gap:29px;
  font-size:15px;
  font-weight:700;
}

.main-nav>a {
  position:relative;
  white-space:nowrap;
  padding-block:10px;
}

.main-nav>a:hover {
  color:var(--accent);
}

.main-nav>a[aria-current=page]::after {
  content:"";
  height:2px;
  position:absolute;
  left:0;
  right:0;
  bottom:1px;
  background:var(--brand);
}

.main-nav .login-link {
  display:flex;
  align-items:center;
  gap:10px;
  border-left:1px solid #cdd2d7;
  padding-left:27px;
  margin-left:4px;
}

.login-link .icon {
  width:16px;
}

.main-nav .nav-cta {
  display:inline-flex;
  align-items:center;
  gap:17px;
  border:1px solid var(--brand);
  border-radius:5px;
  padding:10px 16px;
}

.nav-cta .icon {
  width:17px;
}

.main-nav .nav-cta:hover {
  color:var(--on-brand);
  background:var(--brand);
}

.menu-toggle {
  display:none;
}

.hero {
  background:var(--paper);
  overflow:hidden;
}

.hero-layout {
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:48px;
  padding-top:74px;
  padding-bottom:77px;
  align-items:center;
}

.hero-copy .eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:24px;
}

.hero h1 {
  font-size:clamp(58px,6.55vw,92px);
  letter-spacing:-.055em;
  line-height:1.015;
}

.hero h1>span {
  display:block;
}

.last-word {
  position:relative;
  display:table!important;
  width:max-content;
}

.last-word::after {
  content:"";
  display:block;
  position:absolute;
  left:3px;
  right:3px;
  bottom:0;
  height:6px;
  background:#a9c6c1;
  z-index:0;
  transform:rotate(-1.5deg);
  opacity:.7;
}

.hero-description {
  max-width:430px;
  font-size:19px;
  line-height:1.65;
  margin-top:30px;
}

.hero-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:11px;
  margin-top:28px;
}

.hero-actions .button {
  font-size:15px;
  padding:14px 18px;
  gap:13px;
}

.hero-small {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  margin-top:19px;
}

.hero-small .icon {
  width:15px;
  height:15px;
  color:var(--muted);
}

.hero-product {
  position:relative;
  min-width:0;
  padding-top:20px;
}

.hero-product::before {
  content:"";
  position:absolute;
  width:440px;
  height:440px;
  background:repeating-linear-gradient(90deg,transparent 0 49px,#d7dcdb 49px 50px),repeating-linear-gradient(0deg,transparent 0 49px,#d7dcdb 49px 50px);
  mask-image:radial-gradient(ellipse at center,black,transparent 70%);
  right:-100px;
  top:-70px;
  opacity:.65;
}

.pixel-mark {
  width:17px;
  height:17px;
  display:inline-block;
  background:linear-gradient(var(--brand),var(--brand)) 7px 0/4px 4px no-repeat,linear-gradient(var(--brand),var(--brand)) 14px 0/4px 4px no-repeat,linear-gradient(var(--brand),var(--brand)) 0 7px/4px 4px no-repeat,linear-gradient(var(--brand),var(--brand)) 7px 7px/4px 4px no-repeat,linear-gradient(var(--brand),var(--brand)) 0 14px/4px 4px no-repeat,linear-gradient(var(--brand),var(--brand)) 7px 14px/4px 4px no-repeat,linear-gradient(var(--brand),var(--brand)) 14px 14px/4px 4px no-repeat;
}

.avatar {
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  font-size:9px;
  color:var(--brand);
  background:#dfeaf2;
  border-radius:50%;
}

.bh {
  background:var(--bh);
}

.lv {
  background:var(--lv);
}

.ja {
  background:var(--ja);
}

.wp {
  background:var(--wp);
}

.br {
  background:var(--br);
}

.hero-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px 0 27px;
  border-top:1px solid #d4d9dc;
  color:#657381;
  font-size:14px;
}

.hero-foot>div {
  display:flex;
  gap:35px;
  color:var(--brand);
}

.hero-foot>div>span {
  display:flex;
  align-items:center;
  gap:9px;
}

.hero-foot .icon {
  width:17px;
  height:17px;
}

.status-pill {
  font-size:9px;
  padding:4px 7px;
  border-radius:4px;
  justify-self:start;
  white-space:nowrap;
}

.green {
  background:#d8efde;
  color:#245533;
}

.status-pill.blue {
  background:#d7e8f9;
  color:#21496f;
}

.amber {
  background:#fff3cf;
  color:#6a5322;
}

.chart-label {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  margin-bottom:7px;
}

.chart-label span {
  font-size:10px;
  color:#627a8b;
}

.chart-track {
  height:18px;
  background:#e8eef3;
  border-radius:3px;
  overflow:hidden;
}

.chart-track span {
  background:#52b2cf;
  height:100%;
  display:block;
}

.section {
  padding-block:96px;
}

.section-intro {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:60px;
  margin-bottom:42px;
}

.section-intro>p {
  max-width:400px;
  font-size:18px;
}

.benefit-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.benefit-card {
  padding:30px;
  border-radius:var(--radius);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.blue {
  background:var(--blue);
}

.peach {
  background:var(--peach);
}

.sage {
  background:var(--sage);
}

.benefit-top {
  display:flex;
  align-items:center;
  width:100%;
  margin-bottom:24px;
}

.icon-tile {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:10px;
  background:#ffffff8c;
  color:var(--accent);
  flex:none;
}

.icon-tile .icon {
  width:25px;
  height:25px;
}

.benefit-card h3 {
  font-size:26px;
  line-height:1.15;
  max-width:250px;
  margin-bottom:17px;
}

.home-benefits .benefit-card h3 {
  max-width:none;
  min-block-size:2.3em;
}

.home-benefits .benefit-card {
  background:color-mix(in srgb,var(--blue) 55%,white);
}

.home-benefits .icon-tile {
  background:#ffffff8c;
  color:var(--accent);
}

.benefit-card p {
  font-size:16px;
  line-height:1.65;
  margin-bottom:28px;
}

.benefit-card .text-link {
  margin-top:auto;
}

.workflow-section,.integration-section {
  background:#f7f9fb;
  border-block:1px solid #e9edf0;
}

.workflow-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
}

.workflow-copy>p:not(.eyebrow) {
  margin-top:25px;
  max-width:460px;
}

.workflow-copy>.button {
  margin-top:25px;
}

.workflow-steps {
  --workflow-gap:16px;
  --workflow-gutter:50px;
  --workflow-padding-block:23px;
  --workflow-padding-inline:20px;
  list-style:none;
  margin:0;
  padding:0 0 0 var(--workflow-gutter);
  display:grid;
  grid-auto-rows:1fr;
  gap:var(--workflow-gap);
}

.workflow-steps li {
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  padding:var(--workflow-padding-block) var(--workflow-padding-inline);
  background:white;
  border:1px solid #d9e3ec;
  border-radius:12px;
  box-shadow:0 3px 12px #08234c04;
}

.workflow-steps li::before {
  content:"";
  position:absolute;
  left:calc(16px - var(--workflow-gutter));
  top:-1px;
  bottom:calc(0px - var(--workflow-gap) - 1px);
  width:2px;
  background:color-mix(in srgb,var(--brand) 15%,#f7f9fb);
  pointer-events:none;
}

.workflow-steps li:first-child::before {
  top:50%;
}

.workflow-steps li:last-child::before {
  bottom:50%;
}

.workflow-steps li::after {
  content:"";
  position:absolute;
  left:calc(34px - var(--workflow-gutter));
  top:50%;
  width:calc(var(--workflow-gutter) - 34px);
  height:1px;
  background:color-mix(in srgb,var(--brand) 15%,#f7f9fb);
  pointer-events:none;
}

.workflow-steps li>span {
  position:absolute;
  z-index:1;
  left:calc(0px - var(--workflow-gutter));
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid color-mix(in srgb,var(--brand) 18%,#fff);
  border-radius:50%;
  background:color-mix(in srgb,var(--brand) 7%,#fff);
  box-shadow:0 0 0 4px #f7f9fb;
  font-size:12px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--brand);
}

.workflow-steps li>div {
  min-width:0;
}

.workflow-steps h3 {
  font-size:21px;
  line-height:1.2;
  margin-bottom:7px;
}

.workflow-steps p {
  font-size:15px;
  line-height:1.5;
  max-width:340px;
}

.workflow-steps li>.icon {
  margin-left:auto;
  color:#6786a0;
  width:20px;
}

.integration-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
}

.integration-layout h2 {
  margin-bottom:23px;
}

.integration-layout .text-link {
  margin-top:23px;
}

.connection-graphic {
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  flex-wrap:wrap;
  min-height:270px;
  margin:0;
  border-radius:16px;
  background:radial-gradient(ellipse,#e8edf3,transparent 70%);
  gap:13px;
}

.connection-node,.connection-center {
  display:grid;
  grid-template-rows:34px 14px;
  align-content:center;
  place-items:center;
  row-gap:6px;
}

.connection-node {
  font-size:28px;
  font-weight:700;
  line-height:1;
  letter-spacing:-1px;
  width:104px;
  height:100px;
  background:white;
  border:1px solid #dce4eb;
  border-radius:9px;
  box-shadow:0 7px 16px #08234c06;
  transform:rotate(-4deg);
}

.connection-node:last-of-type {
  transform:rotate(4deg);
}

.connection-node span {
  font-size:10px;
  line-height:14px;
  letter-spacing:0;
  font-weight:400;
  color:#6d7c8e;
}

.connection-center {
  width:150px;
  aspect-ratio:1;
  flex:none;
  padding:20px 10px;
  row-gap:18px;
  background:var(--brand);
  color:var(--on-brand);
  border-radius:16px;
  box-shadow:0 15px 30px #08234c26;
}

.connection-logo {
  position:relative;
  overflow:hidden;
  width:100%;
  max-width:128px;
  aspect-ratio:1148 / 160;
}

.connection-logo img {
  position:absolute;
  max-width:none;
  width:174.216%;
  height:auto;
  left:-37.108%;
  top:-256.25%;
  filter:grayscale(1) invert(1) contrast(8);
  mix-blend-mode:screen;
}

.connection-center>span:last-child {
  font-size:10px;
  line-height:14px;
  color:var(--on-brand);
  opacity:.8;
}

.connection-line {
  color:var(--accent);
}

.connection-line .icon {
  width:22px;
}

.connection-caption {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:4px 12px;
  font-size:16px;
  font-weight:600;
  line-height:1.5;
  position:absolute;
  bottom:8px;
  width:100%;
  text-align:center;
  color:var(--brand);
}

.connection-caption>span {
  white-space:nowrap;
}

.connection-caption>span+span::before {
  content:"·";
  margin-right:12px;
}

.faq-section {
  border-top:1px solid #e6e9ed;
}

.faq-layout {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:90px;
}

.faq-layout h2 {
  margin-bottom:22px;
}

.faq-layout .text-link {
  margin-top:18px;
}

.faq-list details {
  border-bottom:1px solid var(--line);
}

.faq-list details:first-child {
  border-top:1px solid var(--line);
}

.faq-list summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  list-style:none;
  cursor:pointer;
  padding:24px 0;
  font-weight:700;
  font-size:19px;
  line-height:1.35;
}

.faq-list summary::-webkit-details-marker {
  display:none;
}

.faq-list summary .icon {
  width:18px;
  height:18px;
  transition:transform 280ms cubic-bezier(.22,1,.36,1);
}

.faq-list details.is-expanded summary .icon,
.faq-list details:not([data-faq-animated])[open] summary .icon {
  transform:rotate(45deg);
}

.faq-answer {
  overflow:hidden;
}

.faq-answer p {
  padding:0 35px 24px 0;
  font-size:17px;
}

.closing-cta {
  background:var(--brand);
  color:var(--on-brand);
  position:relative;
  overflow:hidden;
}

.closing-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:50px;
}

.closing-cta .eyebrow {
  color:var(--on-brand);
  opacity:.7;
}

.closing-cta h2 {
  font-size:48px;
  margin-bottom:24px;
}

.closing-cta p:not(.eyebrow) {
  color:var(--on-brand);
  opacity:.8;
}

.closing-cta .button {
  background:var(--on-brand);
  color:var(--brand);
  border-color:var(--on-brand);
  padding:18px 24px;
}

.closing-cta .button:hover {
  transform:translateY(-3px);
}

.cta-note {
  display:block;
  color:var(--on-brand);
  opacity:.7;
  font-size:12px;
  margin-top:14px;
}

.site-footer {
  background:var(--paper);
}

.footer-main {
  display:grid;
  grid-template-columns:1.35fr .8fr 1fr;
  gap:70px;
  padding-block:63px 50px;
  font-size:14px;
}

.footer-main>div>p {
  margin-top:20px;
  color:var(--brand);
  font-size:17px;
}

.footer-main>div>span {
  display:block;
  color:#697681;
  font-size:13px;
  margin-top:9px;
}

.footer-main nav {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}

.footer-main strong {
  font-size:14px;
  margin-bottom:9px;
  display:block;
}

.footer-main a:hover {
  color:var(--accent);
}

.footer-contact>a {
  display:block;
  margin-bottom:8px;
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:center;
  padding-block:22px;
  border-top:1px solid #d5dadd;
  font-size:12px;
  color:#6d7982;
}

.footer-bottom>div {
  display:flex;
  gap:22px;
}

.footer-bottom a:hover {
  text-decoration:underline;
  color:var(--accent);
}

.page-intro {
  background:var(--paper);
  padding-block:77px 70px;
}

.page-intro h1 {
  font-size:clamp(44px,5vw,68px);
  max-width:1000px;
}

.page-intro .wrap>p:last-child {
  max-width:690px;
  font-size:21px;
  margin-top:27px;
  line-height:1.65;
}

.section-nav {
  display:flex;
  flex-wrap:wrap;
  gap:34px;
  border-bottom:1px solid var(--line);
  padding-block:28px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
}

.section-nav a {
  display:flex;
  align-items:center;
  gap:9px;
  padding:4px 0;
}

.section-nav a:hover {
  color:var(--accent);
}

.section-nav .icon {
  width:18px;
  height:18px;
}

.feature-detail {
  padding-block:80px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:100px;
  border-bottom:1px solid var(--line);
  align-items:center;
  scroll-margin-top:15px;
}

.feature-detail:last-child {
  border:0;
}

.feature-detail h2 {
  font-size:39px;
}

.feature-detail>div>p:not(.eyebrow) {
  margin-top:22px;
}

.check-list {
  list-style:none;
  padding:0;
  margin:25px 0 0;
  display:grid;
  gap:13px;
  font-size:16px;
}

.check-list li {
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.check-list .icon {
  color:var(--muted);
  width:17px;
  height:20px;
  margin-top:2px;
}

.advantage {
  padding:40px;
  border-radius:var(--radius);
}

.advantage>.icon-tile {
  margin-bottom:45px;
}

.advantage .eyebrow {
  margin-bottom:17px;
}

.advantage h3 {
  font-size:27px;
  line-height:1.4;
}

.data-flow {
  display:grid;
  grid-template-columns:1fr 230px 1fr;
  align-items:center;
  gap:40px;
  padding:44px;
  background:var(--blue);
  border-radius:12px;
}

.data-flow>div:not(.flow-labels) {
  padding:30px;
  background:white;
  border:1px solid #d4e1eb;
  border-radius:10px;
}

.data-flow>div:last-child {
  background:var(--brand);
  color:var(--on-brand);
  border-color:var(--brand);
}

.data-flow>div:last-child .eyebrow,.data-flow>div:last-child p {
  color:var(--on-brand);
  opacity:.8;
}

.data-flow h2 {
  font-size:38px;
  margin-bottom:12px;
}

.data-flow p {
  font-size:16px;
}

.data-flow .eyebrow {
  font-size:10px;
  letter-spacing:.12em;
}

.flow-labels {
  display:flex;
  flex-direction:column;
  gap:25px;
  font-size:14px;
}

.flow-labels>span {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid #b8cbd9;
  padding-bottom:10px;
}

.flow-labels>span:last-child>.icon {
  transform:rotate(180deg);
}

.integration-caption {
  font-size:14px;
  text-align:center;
  margin-block:20px 55px;
}

.integration-detail .benefit-card>.icon-tile {
  margin-bottom:30px;
}

.integration-detail .benefit-card p {
  margin-bottom:0;
}

.inquiry-layout {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:90px;
  align-items:start;
}

.inquiry-copy>.icon-tile {
  margin-bottom:28px;
}

.inquiry-copy h2 {
  margin-bottom:23px;
}

.demo-inquiry-copy .demo-offer h2 {
  font-size:32px;
  margin-bottom:18px;
}

.demo-offer p {
  font-size:18px;
}

.demo-inquiry-copy .price-note h2 {
  font-size:27px;
  margin-bottom:13px;
}

.demo-introduction-link {
  margin-top:30px;
}

.simple-steps {
  display:grid;
  gap:28px;
  list-style:none;
  padding:0;
  margin:35px 0;
}

.simple-steps li {
  display:flex;
  gap:17px;
}

.simple-steps li>span {
  font-size:11px;
  background:var(--blue);
  height:29px;
  width:29px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:none;
}

.simple-steps h3 {
  font-size:20px;
  letter-spacing:-.01em;
  margin-bottom:7px;
}

.simple-steps p {
  font-size:16px;
}

.price-note {
  padding:27px;
  background:var(--blue);
  border-radius:10px;
  margin-top:40px;
}

.price-note h3 {
  font-size:25px;
  margin-bottom:13px;
}

.price-note p {
  font-size:16px;
}

.price-note .text-link {
  margin-top:18px;
}

.price-note .eyebrow {
  margin-bottom:12px;
  font-size:10px;
}

.contact-form {
  border:1px solid #d6e1e9;
  background:#fff;
  padding:35px;
  border-radius:12px;
  box-shadow:0 10px 35px #08234c07;
}

.form-heading {
  margin-bottom:26px;
}

.form-heading h2 {
  font-size:28px;
  letter-spacing:-.025em;
  margin-top:8px;
}

.form-heading p {
  font-size:13px;
  margin-top:12px;
}

.form-heading .eyebrow {
  font-size:10px;
}

.field {
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:20px;
  min-width:0;
}

.field label {
  font-size:14px;
  font-weight:700;
}

.field label span {
  font-weight:400;
  color:var(--muted);
}

.field input,.field select,.field textarea {
  background:#f9fbfc;
  color:var(--ink);
  border:1px solid #cbd7e0;
  border-radius:5px;
  width:100%;
  padding:11px 13px;
  font-size:16px;
  min-height:45px;
}

.field select {
  cursor:pointer;
  border-radius:8px;
  padding:12px 15px;
  transition:border-color .15s,background .15s,box-shadow .15s;
}

.field select:hover {
  border-color:var(--brand);
  background:#fff;
}

.field select:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-color:var(--accent);
}

/* Keep native selection, validation and keyboard behavior. Browsers without
   customizable selects retain their regular picker and the field styling above. */
@supports (appearance:base-select) {
  .field select,.field select::picker(select) {
    appearance:base-select;
  }

  .field select {
    align-items:center;
    gap:12px;
  }

  .field select:open {
    background:#fff;
    border-color:var(--brand);
    box-shadow:0 0 0 3px var(--brand-soft);
  }

  .field select::picker-icon {
    content:"";
    width:8px;
    height:8px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    margin-right:3px;
    color:var(--brand);
    rotate:45deg;
    transition:rotate .15s;
  }

  .field select:open::picker-icon {
    rotate:225deg;
  }

  .field select::picker(select) {
    padding:6px;
    margin-block:7px;
    border:1px solid #d2dee8;
    border-radius:10px;
    background:#fff;
    color:var(--ink);
    box-shadow:0 12px 32px -8px #08234c30;
    max-block-size:min(340px,60dvh);
    overflow-y:auto;
    position-try-order:normal;
  }

  .field select option {
    display:flex;
    align-items:center;
    gap:12px;
    min-height:44px;
    padding:10px 12px;
    border-radius:6px;
    font-size:16px;
    line-height:1.4;
    cursor:pointer;
  }

  .field select option:checked {
    background:var(--brand-soft);
    color:var(--brand);
    font-weight:700;
  }

  .field select option:hover {
    background:#edf3f8;
  }

  .field select option:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:-2px;
    background:#edf3f8;
  }

  .field select option::checkmark {
    order:1;
    margin-left:auto;
    color:var(--brand);
  }
}

.field input::placeholder,.field textarea::placeholder {
  color:#697c8b;
  opacity:1;
}

.field textarea {
  resize:vertical;
  min-height:130px;
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px;
}

.form-privacy {
  font-size:13px;
  margin:0 0 22px;
  line-height:1.6;
}

.form-privacy a,.form-alternative a {
  color:var(--brand);
  text-decoration:underline;
  text-underline-offset:3px;
}

.form-privacy a:hover,.form-alternative a:hover {
  color:var(--accent);
}

.contact-form>.button {
  width:100%;
}

.form-alternative {
  font-size:13px;
  text-align:center;
  margin-top:20px;
}

.form-status {
  padding:14px;
  border-radius:6px;
  background:#eaf2e5;
  color:#2f583e;
  font-size:16px;
  margin-top:18px;
}

.form-status.is-error {
  background:#f9e4df;
  color:#7d3429;
}

.button-spinner {
  display:none;
  width:18px;
  height:18px;
  flex:none;
  border:2px solid #ffffff50;
  border-top-color:currentColor;
  border-radius:50%;
}

.contact-form.is-submitting .button-spinner {
  display:block;
  animation:button-spin .8s linear infinite;
}

.contact-form.is-submitting .submit-arrow {
  display:none;
}

.contact-form.is-submitting>.button {
  opacity:1;
  background:var(--brand);
  transform:none;
  cursor:default;
}

@keyframes button-spin {
  to { transform:rotate(360deg); }
}

.demo-modal-open {
  overflow:hidden;
  scrollbar-gutter:stable;
}

.demo-request-dialog {
  width:min(660px,calc(100% - 32px));
  max-width:none;
  max-height:calc(100dvh - 48px);
  margin:auto;
  padding:0;
  border:0;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  color:var(--ink);
  box-shadow:0 24px 90px #08234c30;
}

.demo-request-dialog:not([open]) {
  display:none;
}

.demo-request-dialog[open] {
  animation:demo-dialog-in .26s cubic-bezier(.22,1,.36,1);
}

.demo-request-dialog::backdrop {
  background:#08234c30;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  animation:demo-backdrop-in .22s ease-out;
}

.demo-request-dialog-scroll {
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#b9cad8 transparent;
}

.demo-request-dialog .contact-form {
  padding:34px;
  border:0;
  border-radius:0;
  box-shadow:none;
}

.demo-request-dialog .form-heading h2 {
  padding-right:32px;
}

.demo-request-dialog .form-row {
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}

.demo-request-dialog-close {
  position:absolute;
  z-index:1;
  top:14px;
  right:14px;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  padding:0;
  border:0;
  border-radius:9px;
  background:#f5f8fb;
  color:var(--brand);
}

.demo-request-dialog-close .icon {
  width:22px;
  height:22px;
  transform:rotate(45deg);
}

.demo-request-dialog-close:hover {
  background:var(--accent-soft);
  color:var(--accent);
}

.demo-success {
  position:fixed;
  z-index:1000;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  width:360px;
  max-width:calc(100% - 32px);
  padding:34px 28px 30px;
  border:1px solid var(--accent-light);
  border-radius:22px;
  background:#fff;
  box-shadow:0 24px 80px #08234c30,0 4px 16px #08234c0d;
  text-align:center;
}

.demo-success[hidden] {
  display:none;
}

.demo-success.is-visible {
  animation:demo-success-life 4.2s ease both;
}

.demo-success strong {
  font-size:25px;
  letter-spacing:-.025em;
}

.demo-success p {
  margin-top:7px;
  font-size:16px;
  line-height:1.5;
}

.demo-success-icon {
  position:relative;
  display:grid;
  place-items:center;
  flex:none;
  width:76px;
  height:76px;
  border-radius:50%;
  background:linear-gradient(145deg,var(--accent-soft),#fff);
  box-shadow:inset 0 0 0 1px var(--accent-soft),0 6px 20px #7f57a814;
  color:var(--accent);
}

.demo-success-icon::before,.demo-success-icon::after {
  content:"";
  position:absolute;
  inset:-5px;
  border:2px solid var(--accent-light);
  border-radius:50%;
  opacity:0;
}

.demo-success-icon svg {
  position:relative;
  z-index:1;
  width:47px;
  height:47px;
}

.demo-success.is-visible .demo-success-icon {
  animation:demo-success-pop .75s .08s cubic-bezier(.22,1,.36,1) both;
}

.demo-success.is-visible .demo-success-icon::before {
  animation:demo-success-ripple .9s .3s ease-out both;
}

.demo-success.is-visible .demo-success-icon::after {
  animation:demo-success-ripple .9s .5s ease-out both;
}

.demo-success.is-visible path {
  stroke-dasharray:1;
  animation:demo-success-check .6s .22s ease both;
}

.demo-success-burst {
  position:absolute;
  inset:0;
  pointer-events:none;
}

.demo-success-burst i {
  position:absolute;
  top:50%;
  left:50%;
  width:5px;
  height:9px;
  border-radius:2px;
  background:var(--accent);
  opacity:0;
}

.demo-success-burst i:nth-child(1) { --x:-73px; --y:-42px; --turn:-45deg; }
.demo-success-burst i:nth-child(2) { --x:72px; --y:-38px; --turn:55deg; }
.demo-success-burst i:nth-child(3) { --x:-65px; --y:40px; --turn:-110deg; }
.demo-success-burst i:nth-child(4) { --x:67px; --y:44px; --turn:120deg; }
.demo-success-burst i:nth-child(5) { --x:-12px; --y:-79px; --turn:-25deg; }
.demo-success-burst i:nth-child(6) { --x:-47px; --y:-67px; --turn:60deg; }
.demo-success-burst i:nth-child(7) { --x:42px; --y:-70px; --turn:-70deg; }
.demo-success-burst i:nth-child(8) { --x:84px; --y:5px; --turn:85deg; }
.demo-success-burst i:nth-child(3n) { background:var(--brand); }
.demo-success-burst i:nth-child(2n) { background:var(--accent-light); border-radius:50%; width:6px; height:6px; }

.demo-success.is-visible .demo-success-burst i {
  animation:demo-success-confetti 1s .25s cubic-bezier(.16,1,.3,1) both;
}

.demo-announcement {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

@keyframes demo-dialog-in {
  from { opacity:0; transform:translateY(14px) scale(.985); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

@keyframes demo-backdrop-in {
  from { opacity:0; }
  to { opacity:1; }
}

@keyframes demo-success-life {
  0% { opacity:0; transform:translate(-50%,calc(-50% + 28px)) scale(.82) rotate(-2deg); }
  8% { opacity:1; transform:translate(-50%,calc(-50% - 6px)) scale(1.04) rotate(.5deg); }
  14% { opacity:1; transform:translate(-50%,calc(-50% + 2px)) scale(.99) rotate(0); }
  19%,84% { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,calc(-50% + 8px)) scale(.96); }
}

@keyframes demo-success-pop {
  from { transform:scale(.45) rotate(-12deg); }
  55% { transform:scale(1.16) rotate(3deg); }
  to { transform:scale(1); }
}

@keyframes demo-success-ripple {
  0% { opacity:.75; transform:scale(.85); }
  100% { opacity:0; transform:scale(1.6); }
}

@keyframes demo-success-confetti {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.4); }
  12% { opacity:1; }
  65% { opacity:1; transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--turn)); }
  100% { opacity:0; transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y) + 14px)) rotate(var(--turn)) scale(.5); }
}

@keyframes demo-success-check {
  from { stroke-dashoffset:1; }
  to { stroke-dashoffset:0; }
}

@media(max-width:640px) {
  .demo-request-dialog {
    width:calc(100% - 24px);
    max-height:calc(100dvh - 24px);
  }
  .demo-request-dialog-scroll {
    max-height:calc(100dvh - 24px);
  }
  .demo-request-dialog .contact-form {
    padding:30px 20px 24px;
  }
  .demo-request-dialog .form-heading h2 {
    font-size:26px;
  }
  .demo-request-dialog .form-row {
    grid-template-columns:minmax(0,1fr);
  }
  .demo-success {
    padding:30px 20px 26px;
    gap:18px;
  }
}

.contact-method {
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:28px;
}

.contact-method>div>span {
  display:block;
  font-size:13px;
  color:var(--muted);
}

.contact-method a {
  font-size:22px;
  font-weight:700;
  overflow-wrap:anywhere;
}

.contact-method a:hover {
  text-decoration:underline;
  color:var(--accent);
}

.contact-office {
  font-style:normal;
  font-size:14px;
  line-height:1.6;
  margin-top:32px;
  color:var(--muted);
}

#anfrage {
  scroll-margin-top:110px;
}

/* Temporary content comparison, removable through showVariantSwitcher. */
html:has(.concept-switcher:not([hidden])) {
  scroll-padding-top:var(--concept-offset,190px);
}
.concept-switcher {
  position:sticky;
  top:var(--concept-header-height,88px);
  z-index:25;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 3px 10px #08234c05;
}
.concept-switcher-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:14px;
}
.concept-label>span {
  display:block;
  font-size:10px;
  letter-spacing:.12em;
  font-weight:700;
}
.concept-label small {
  display:block;
  font-size:12px;
  color:var(--muted);
}
.concept-buttons {
  display:flex;
  gap:7px;
}
.concept-buttons button {
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 15px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  color:var(--brand);
  font-size:14px;
  font-weight:700;
}
.concept-buttons button>span {
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:4px;
  background:var(--blue);
  font-size:11px;
  flex:none;
}
.concept-buttons button[aria-selected=true] {
  background:var(--brand);
  color:var(--on-brand);
  border-color:var(--brand);
}
.concept-buttons button[aria-selected=true]>span {
  background:#ffffff25;
}
.concept-buttons button:hover:not([aria-selected=true]) {
  background:var(--brand-soft);
  border-color:var(--brand);
}
.concept-jump {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  white-space:nowrap;
}
.concept-jump .icon {
  width:16px;
  transform:rotate(90deg);
}
.day-questions {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px;
}
.day-questions article {
  position:relative;
  border-top:2px solid var(--line);
  padding-top:24px;
}
.question-number {
  font-size:12px;
  color:var(--muted);
}
.day-questions article>.icon {
  position:absolute;
  top:25px;
  right:0;
  color:var(--accent);
}
.day-questions h3 {
  margin-block:30px 16px;
  font-size:27px;
}
.day-questions p {
  font-size:17px;
}
.day-journey {
  padding:0;
  margin:0;
  list-style:none;
  display:grid;
  gap:20px;
}
.day-journey li {
  display:grid;
  grid-template-columns:95px 1fr .8fr;
  gap:34px;
  align-items:center;
  padding:30px;
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
}
.journey-time {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  color:var(--accent);
}
.journey-time span {
  font-size:19px;
  font-weight:700;
}
.journey-copy .eyebrow {
  margin-bottom:12px;
  font-size:10px;
}
.journey-copy h3 {
  font-size:25px;
  margin-bottom:14px;
}
.journey-copy>p:last-child {
  font-size:16px;
}
.journey-example {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:13px;
  padding:24px;
  background:var(--blue);
  border-radius:8px;
}
.journey-example .status-pill {
  font-size:11px;
}
.journey-example strong {
  font-size:17px;
  line-height:1.4;
}
.journey-example>span:last-child {
  font-size:14px;
  color:var(--muted);
}
.example-caption {
  font-size:12px;
  margin-top:16px;
  text-align:right;
}
.function-strip {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:24px;
  padding-top:42px;
  margin-top:40px;
  border-top:1px solid var(--line);
}
.function-strip>div {
  margin-right:auto;
}
.function-strip .eyebrow {
  font-size:10px;
  margin-bottom:10px;
}
.function-strip h3 {
  font-size:24px;
}
.function-strip>a {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:15px;
  font-weight:700;
  padding-block:10px;
}
.function-strip>a:hover {
  color:var(--accent);
}
.function-strip .icon {
  width:17px;
}
.team-perspectives {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:24px;
  row-gap:0;
}
.team-perspective {
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 5;
  padding:38px;
  border-radius:12px;
}
.team-perspective>.icon-tile {
  margin-bottom:20px;
}
.team-perspective .eyebrow {
  font-size:10px;
  margin-bottom:17px;
}
.team-perspective h3 {
  font-size:32px;
  margin-bottom:20px;
}
.team-perspective>p:not(.eyebrow) {
  font-size:17px;
}
.team-lead {
  background:var(--brand);
  color:var(--on-brand);
}
.team-lead p,.team-lead .check-list .icon {
  color:var(--on-brand);
}
.team-lead>.icon-tile {
  background:#ffffff18;
}

/* Homepage accents connect the surrounding sections to the dashboard preview. */
.page-home .hero .tiny-dot {
  background:var(--accent);
}

.page-home .hero .last-word::after {
  background:var(--accent-light);
}

.page-home .workflow-steps li>span {
  color:var(--accent);
  background:var(--accent-soft);
  border-color:color-mix(in srgb,var(--accent) 25%,white);
}

.page-home .workflow-steps li::before,
.page-home .workflow-steps li::after {
  background:color-mix(in srgb,var(--accent) 25%,#f7f9fb);
}

.page-home .workflow-steps li>.icon,
.faq-list summary>.icon,
a .icon-arrow {
  color:var(--accent);
}

a.button:not(.button-secondary) .icon-arrow {
  color:var(--accent-light);
}

.closing-cta a.button .icon-arrow {
  color:var(--accent);
}

.page-home .team-perspective:not(.team-lead)>.icon-tile {
  color:var(--accent);
  background:#ffffff8c;
}

.page-home .team-lead>.icon-tile {
  color:var(--accent-light);
  background:#ffffff18;
}
.team-capacity-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.team-capacity-layout>div>p:not(.eyebrow) {
  margin-top:24px;
}
.team-capacity-layout .button {
  margin-top:28px;
}
.capacity-example {
  margin:0;
  border:1px solid var(--line);
  border-radius:12px;
  padding:30px;
  background:#fff;
  box-shadow:0 8px 24px #08234c06;
}
.capacity-example-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:30px;
}
.capacity-example-heading .eyebrow {
  font-size:10px;
}
.capacity-example h3 {
  margin-top:6px;
  font-size:25px;
}
.capacity-person {
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:24px;
}
.capacity-person .avatar {
  width:30px;
  height:30px;
  font-size:10px;
  flex:none;
}
.capacity-person>div {
  flex:1;
  min-width:0;
}
.capacity-person .chart-label {
  font-size:15px;
}
.capacity-person .chart-label span {
  font-size:12px;
}
.capacity-person p {
  font-size:12px;
  margin-top:6px;
}
.capacity-person .chart-track {
  height:12px;
}
.capacity-person:nth-last-of-type(1) .chart-track>span {
  background:#f4b942;
}
.capacity-example figcaption {
  border-top:1px solid var(--line);
  padding-top:16px;
  font-size:12px;
  color:var(--muted);
  line-height:1.6;
}
.team-coordination {
  margin-top:70px;
  padding-top:60px;
  border-top:1px solid var(--line);
}
.team-coordination h2 {
  font-size:36px;
}
.coordination-steps {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:36px;
  margin-top:35px;
}
.coordination-steps article>span {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#e2ebf3;
  font-size:11px;
  margin-bottom:20px;
}
.coordination-steps h3 {
  font-size:23px;
  margin-bottom:14px;
}
.coordination-steps p {
  font-size:16px;
}
@media(max-width:1000px) {
  .concept-label,.concept-jump {
    display:none;
  }
  .concept-switcher-inner {
    justify-content:center;
  }
  .day-journey li {
    grid-template-columns:65px 1fr .85fr;
    gap:22px;
    padding:24px;
  }
  .team-capacity-layout {
    gap:35px;
  }
  .team-perspective {
    padding:28px;
  }
}
@media(max-width:740px) {
  .day-questions,.team-perspectives,.team-capacity-layout,.coordination-steps {
    grid-template-columns:1fr;
    gap:28px;
  }
  .team-perspective {
    display:block;
    grid-row:auto;
  }
  .day-questions h3 {
    margin-top:18px;
  }
  .day-journey li {
    grid-template-columns:1fr;
    gap:20px;
  }
  .journey-time {
    flex-direction:row;
    justify-content:flex-start;
  }
  .journey-example {
    padding:20px;
  }
  .team-perspective h3 {
    font-size:28px;
  }
  .team-capacity-layout h2,.team-coordination h2 {
    font-size:34px;
  }
  .capacity-example {
    padding:24px;
  }
  .capacity-person .chart-label {
    flex-wrap:wrap;
    gap:4px 12px;
  }
  .function-strip {
    gap:10px 24px;
    margin-top:30px;
    padding-top:30px;
  }
  .function-strip>div {
    width:100%;
    margin-bottom:10px;
  }
  .team-coordination {
    margin-top:45px;
    padding-top:40px;
  }
}
@media(max-width:640px) {
  .concept-switcher-inner {
    width:calc(100% - 24px);
    padding-block:10px;
  }
  .concept-buttons {
    display:grid;
    grid-template-columns:.85fr 1fr 1.15fr;
    gap:5px;
    width:100%;
  }
  .concept-buttons button {
    flex-direction:column;
    gap:5px;
    padding:8px 5px;
    font-size:12px;
    line-height:1.25;
    text-align:center;
  }
  .concept-buttons button>span {
    width:18px;
    height:18px;
    font-size:10px;
  }
}

@media(min-width:1600px) {
  .hero-layout {
    padding-block:95px;
  }
  .hero-product {
    padding-top:30px;
  }
}

@media(min-width:901px) and (max-width:1250px) {
  .main-nav .nav-cta {
    display:none;
  }
}

@media(max-width:1150px) {
  .wrap {
    width:calc(100% - 64px);
  }
  .main-nav {
    gap:19px;
    font-size:14px;
  }
  .main-nav .login-link {
    padding-left:17px;
  }
  .main-nav .nav-cta {
    display:none;
  }
  .hero-layout {
    gap:30px;
    grid-template-columns:.88fr 1.12fr;
  }
  .hero h1 {
    font-size:73px;
  }
  .hero-description {
    font-size:18px;
  }
  .hero-actions {
    align-items:flex-start;
    flex-direction:column;
  }
  .hero-actions .button-secondary {
    border-color:transparent;
    padding-left:0;
  }
  .hero-foot>div {
    gap:25px;
  }
  .workflow-layout,.integration-layout,.faq-layout {
    gap:50px;
  }
  .inquiry-layout,.feature-detail {
    gap:55px;
  }
  .benefit-card {
    padding:25px;
  }
  .benefit-card h3 {
    font-size:24px;
  }
  .connection-graphic {
    gap:7px;
  }
  .connection-node {
    width:86px;
    height:87px;
  }
  .connection-center {
    width:110px;
    padding:12px 8px;
  }
  .connection-caption {
    flex-direction:column;
    gap:0;
  }
  .connection-caption>span+span::before {
    content:none;
  }
  .connection-line .icon {
    width:16px;
  }
  .data-flow {
    grid-template-columns:1fr 170px 1fr;
    gap:20px;
    padding:30px;
  }
  .data-flow>div:not(.flow-labels) {
    padding:22px;
  }
  .footer-main {
    gap:40px;
  }
  .contact-form {
    padding:27px;
  }
}

@media(max-width:900px) {
  .wrap {
    width:calc(100% - 48px);
  }
  .header-inner {
    min-height:75px;
    gap:10px;
    flex-wrap:wrap;
  }
  .brand-crop {
    width:150px;
    height:27px;
  }
  .brand img {
    width:263px;
    height:131.5px;
    left:-55.8px;
    top:-53.5px;
  }
  .main-nav .login-link {
    border-left:0;
    padding-left:0;
    margin-left:0;
  }
  .main-nav {
    width:100%;
    flex-wrap:wrap;
    padding-bottom:18px;
    gap:15px 24px;
    font-size:14px;
  }
  .js-menu .menu-toggle {
    display:inline-flex;
    align-items:center;
    gap:12px;
    background:none;
    border:1px solid #c8cfd6;
    border-radius:5px;
    padding:9px 12px;
    font-size:13px;
    color:var(--brand);
  }
  .menu-lines {
    width:15px;
    height:11px;
    border-top:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    position:relative;
  }
  .menu-lines::after {
    content:"";
    position:absolute;
    top:4px;
    left:0;
    width:15px;
    height:1.5px;
    background:currentColor;
  }
  .js-menu .main-nav {
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding-top:5px;
  }
  .js-menu .main-nav.is-open {
    display:flex;
  }
  .js-menu .main-nav>a {
    padding:12px 0;
    border-bottom:1px solid #d8dcdf;
  }
  .js-menu .main-nav .nav-cta {
    display:flex;
    margin-top:13px;
    padding:12px;
    justify-content:center;
  }
  .js-menu .main-nav>a[aria-current=page]::after {
    display:none;
  }
  .js-menu .main-nav>a[aria-current=page] {
    color:var(--accent);
  }
  .hero-layout {
    grid-template-columns:1fr;
    gap:35px;
    padding-block:56px;
  }
  .hero-copy {
    max-width:630px;
  }
  .hero h1 {
    font-size:82px;
  }
  .hero h1>span {
    display:inline;
  }
  .hero h1>span::after {
    display:none;
  }
  .hero h1>span:not(:last-child)::after {
    content:" ";
    display:inline;
  }
  .hero h1 .last-word {
    display:inline!important;
  }
  .hero-description {
    max-width:520px;
    font-size:20px;
    margin-top:25px;
  }
  .hero-actions {
    flex-direction:row;
    align-items:center;
    gap:18px;
  }
  .hero-actions .button-secondary {
    padding:14px 18px;
    border-color:#c4cbd3;
  }
  .hero-product {
    width:100%;
    max-width:620px;
    margin-inline:auto;
    padding-top:20px;
  }
  .hero-foot {
    flex-direction:column;
    gap:14px;
    padding-block:24px;
  }
  .hero-foot>div {
    gap:35px;
  }
  .section {
    padding-block:70px;
  }
  .section-intro {
    align-items:flex-start;
    gap:22px;
    flex-direction:column;
  }
  .section-intro>p {
    max-width:550px;
  }
  .benefit-grid {
    gap:12px;
  }
  .benefit-card {
    padding:23px;
  }
  .benefit-top {
    margin-bottom:24px;
  }
  .benefit-card h3 {
    font-size:23px;
  }
  .benefit-card p {
    font-size:15px;
  }
  .benefit-card .text-link {
    font-size:14px;
    gap:10px;
  }
  .workflow-layout {
    grid-template-columns:1fr 1fr;
    gap:30px;
  }
  .workflow-steps {
    --workflow-padding-block:18px;
    --workflow-padding-inline:14px;
  }
  .workflow-steps li {
    gap:12px;
  }
  .workflow-steps li>.icon {
    display:none;
  }
  .workflow-steps h3 {
    font-size:20px;
  }
  .workflow-copy h2 {
    font-size:35px;
  }
  .integration-layout {
    grid-template-columns:1fr;
    gap:25px;
  }
  .connection-graphic {
    max-width:550px;
    width:100%;
    margin-inline:auto;
    gap:22px;
  }
  .connection-node {
    width:110px;
    height:105px;
  }
  .connection-center {
    width:130px;
  }
  .faq-layout {
    grid-template-columns:1fr;
    gap:35px;
  }
  .faq-layout>div:first-child>p:not(.eyebrow) {
    max-width:600px;
  }
  .closing-inner {
    align-items:flex-start;
    flex-direction:column;
    gap:30px;
  }
  .closing-cta h2 {
    font-size:44px;
  }
  .footer-main {
    grid-template-columns:1.3fr 1fr;
    gap:40px;
  }
  .footer-contact {
    grid-column:1/-1;
  }
  .footer-bottom>span:last-child {
    display:none;
  }
  .inquiry-layout {
    gap:36px;
    grid-template-columns:1fr 1.2fr;
  }
  .form-row {
    grid-template-columns:1fr;
    gap:0;
  }
  .contact-form {
    padding:24px;
  }
  .data-flow {
    grid-template-columns:1fr 140px 1fr;
    padding:24px;
    gap:15px;
  }
  .data-flow h2 {
    font-size:30px;
  }
  .data-flow .eyebrow {
    font-size:8px;
    letter-spacing:.08em;
  }
  .data-flow p {
    font-size:13px;
  }
  .feature-detail {
    gap:40px;
  }
  .feature-detail h2 {
    font-size:34px;
  }
  .advantage {
    padding:28px;
  }
  .advantage h3 {
    font-size:24px;
  }
}

@media(max-width:640px) {
  .wrap {
    width:calc(100% - 40px);
  }
  .site-header {
    position:sticky;
  }
  .header-inner {
    min-height:72px;
    gap:10px;
    flex-wrap:wrap;
  }
  .brand-crop {
    width:148px;
  }
  .hero-layout {
    padding-top:43px;
    padding-bottom:33px;
    gap:20px;
  }
  .hero-copy .eyebrow {
    font-size:10px;
    letter-spacing:.12em;
    margin-bottom:25px;
  }
  .hero h1 {
    font-size:clamp(51px,12.9vw,80px);
    line-height:1.04;
  }
  .hero h1>span,.hero h1 .last-word {
    display:block!important;
  }
  .hero-description {
    font-size:18px;
    line-height:1.6;
    margin-top:25px;
  }
  .hero-actions {
    gap:10px;
    margin-top:26px;
    align-items:stretch;
    flex-direction:column;
  }
  .hero-actions .button {
    justify-content:space-between;
    font-size:16px;
    padding:16px 20px;
  }
  .hero-small {
    font-size:12px;
    margin-top:18px;
  }
  .hero-product {
    padding-top:28px;
  }
  .hero-foot>span {
    font-size:12px;
  }
  .hero-foot>div {
    gap:16px;
    flex-wrap:wrap;
    justify-content:center;
    font-size:11px;
  }
  .hero-foot .icon {
    width:14px;
    height:14px;
  }
  .hero-foot>div>span {
    gap:5px;
  }
  .section {
    padding-block:57px;
  }
  .eyebrow {
    font-size:10px;
    letter-spacing:.13em;
    margin-bottom:16px;
  }
  h2 {
    font-size:34px;
  }
  .section-intro {
    margin-bottom:30px;
  }
  .section-intro>p {
    font-size:17px;
  }
  .section-intro>p br {
    display:none;
  }
  .benefit-grid {
    grid-template-columns:1fr;
    gap:15px;
  }
  .benefit-card {
    padding:28px;
  }
  .benefit-top {
    margin-bottom:20px;
  }
  .benefit-card h3 {
    max-width:none;
    font-size:27px;
  }
  .home-benefits .benefit-card h3 {
    min-block-size:0;
  }
  .benefit-card p {
    font-size:17px;
    margin-bottom:20px;
  }
  .benefit-card .text-link {
    font-size:16px;
  }
  .workflow-layout {
    grid-template-columns:1fr;
    gap:34px;
  }
  .workflow-copy h2 {
    font-size:34px;
  }
  .workflow-copy>p:not(.eyebrow) {
    font-size:17px;
    margin-top:20px;
  }
  .workflow-steps {
    --workflow-gap:14px;
    --workflow-gutter:42px;
    --workflow-padding-block:20px;
    --workflow-padding-inline:17px;
    grid-auto-rows:auto;
  }
  .workflow-steps li {
    gap:16px;
  }
  .workflow-steps h3 {
    font-size:21px;
  }
  .workflow-steps p {
    font-size:16px;
  }
  .integration-layout {
    gap:30px;
  }
  .connection-graphic {
    min-height:215px;
    gap:9px;
  }
  .connection-node {
    width:80px;
    height:80px;
    font-size:24px;
  }
  .connection-node,.connection-center {
    grid-template-rows:28px 12px;
  }
  .connection-node span,.connection-center>span:last-child {
    font-size:8px;
    line-height:12px;
  }
  .connection-center {
    width:104px;
  }
  .connection-line .icon {
    width:16px;
  }
  .connection-caption {
    font-size:14px;
    bottom:4px;
  }
  .integration-copy>p:not(.eyebrow) {
    font-size:17px;
  }
  .faq-list summary {
    font-size:18px;
    padding-block:21px;
  }
  .faq-answer p {
    font-size:16px;
    padding-right:10px;
  }
  .closing-cta h2 {
    font-size:37px;
  }
  .closing-cta .button {
    font-size:15px;
    padding:16px 19px;
  }
  .closing-cta p:not(.eyebrow) {
    font-size:17px;
  }
  .cta-note {
    font-size:11px;
  }
  .footer-main {
    grid-template-columns:1fr;
    gap:32px;
    padding-block:45px 35px;
  }
  .footer-contact {
    grid-column:auto;
  }
  .footer-main nav {
    gap:9px;
  }
  .footer-main strong {
    margin-bottom:5px;
  }
  .footer-bottom {
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    font-size:12px;
  }
  .page-intro {
    padding-block:46px;
  }
  .page-intro h1 {
    font-size:42px;
  }
  .page-intro .wrap>p:last-child {
    font-size:18px;
    margin-top:22px;
  }
  .section-nav {
    gap:17px 25px;
    padding-block:23px;
    font-size:11px;
  }
  .feature-detail {
    grid-template-columns:1fr;
    gap:30px;
    padding-block:48px;
  }
  .feature-detail h2 {
    font-size:33px;
  }
  .feature-detail>div>p:not(.eyebrow) {
    font-size:17px;
  }
  .advantage>.icon-tile {
    margin-bottom:24px;
  }
  .advantage h3 {
    font-size:23px;
  }
  .data-flow {
    grid-template-columns:1fr;
    gap:20px;
    padding:23px;
  }
  .data-flow .eyebrow {
    font-size:10px;
  }
  .data-flow p {
    font-size:16px;
  }
  .flow-labels {
    gap:12px;
  }
  .flow-labels>span {
    font-size:14px;
  }
  .integration-caption {
    font-size:13px;
    line-height:1.5;
    text-align:left;
    margin-bottom:30px;
  }
  .inquiry-layout {
    grid-template-columns:1fr;
    gap:37px;
  }
  .inquiry-copy>h2 {
    font-size:32px;
  }
  .inquiry-copy>p {
    font-size:17px;
  }
  .simple-steps {
    gap:23px;
    margin-block:28px;
  }
  .price-note {
    margin-top:30px;
  }
  .contact-form {
    padding:23px 19px;
  }
  .form-heading h2 {
    font-size:28px;
  }
  .form-heading .eyebrow {
    font-size:9px;
  }
  .form-alternative {
    font-size:12px;
  }
  .contact-method a {
    font-size:21px;
  }
  .status-pill {
    font-size:8px;
    padding-inline:5px;
  }
  .check-list {
    font-size:16px;
  }
}

@media(max-width:380px) {
  .connection-graphic {
    gap:4px;
    flex-wrap:nowrap;
  }
  .connection-node {
    width:64px;
    height:72px;
    font-size:22px;
    flex:none;
  }
  .connection-node,.connection-center {
    grid-template-rows:26px 11px;
  }
  .connection-node span,.connection-center>span:last-child {
    font-size:7px;
    line-height:11px;
  }
  .connection-center {
    width:82px;
    padding:10px 6px;
  }
  .connection-line .icon {
    width:12px;
  }
}

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