@charset "UTF-8";
:root {
  --ink:#142139;
  --muted:#52647f;
  --blue:#1f5de5;
  --blue-dark:#1d57d5;
  --purple:#8a63db;
  --green:#24765a;
  --line:#e0e8f3;
  --pale:#f5f8ff;
  --shadow:0 20px 55px #42659212;
  --font:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:150px
}
body {
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased
}
button,input,select,textarea {
  font:inherit;
  color:inherit
}
a {
  color:inherit;
  text-decoration:none
}
button {
  cursor:pointer
}
a,button,summary {
  touch-action:manipulation
}
svg {
  display:inline-block;
  vertical-align:middle;
  flex-shrink:0
}
button svg,a svg {
  pointer-events:none
}
h1,h2,h3,h4,p {
  margin:0
}
h1,h2,h3,h4 {
  line-height:1.4
}
h2 {
  font-size:34px;
  font-weight:650;
  letter-spacing:-.7px
}
h3,h4 {
  font-weight:600
}
p {
  color:var(--muted)
}
[hidden] {
  display:none!important
}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:3px solid #82a8ff;
  outline-offset:4px
}
.container {
  width:min(1440px,88%);
  margin:auto
}
.section {
  padding:80px 0
}
.eyebrow {
  font-size:14px;
  letter-spacing:.08em;
  font-weight:600;
  color:var(--blue);
  margin-bottom:16px
}
.section-intro {
  display:flex;
  justify-content:space-between;
  gap:28px;
  align-items:flex-end;
  margin-bottom:28px
}
.section-intro p {
  font-size:15px;
  margin-top:12px
}
.link-arrow {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--blue);
  font-size:14px;
  font-weight:550
}
.link-arrow svg {
  transition:transform .2s
}
.link-arrow:hover svg {
  transform:translateX(3px)
}
button.link-arrow {
  padding:0;
  border:0;
  background:none
}
.button-row {
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap
}
.btn {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 22px;
  background:#fff;
  border:1px solid #cfdcee;
  border-radius:7px;
  font-size:14px;
  font-weight:550;
  line-height:1.5;
  text-align:center;
  transition:background .2s,box-shadow .2s
}
.btn:hover {
  background:#f1f6ff;
  border-color:#9fbcec
}
.btn-primary {
  color:#fff;
  background:var(--blue);
  border-color:var(--blue);
  box-shadow:0 5px 15px #286bff12
}
.btn-primary:hover {
  background:var(--blue-dark);
  border-color:var(--blue-dark)
}
.btn-sm {
  min-height:40px;
  padding:8px 16px
}
.btn-lg {
  min-height:48px;
  padding:12px 25px;
  font-size:15px
}
.icon-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  background:transparent;
  border-radius:7px
}
.icon-btn:hover {
  background:#eef4ff
}
.skip-link {
  position:fixed;
  top:-80px;
  left:20px;
  padding:10px;
  background:white;
  z-index:100
}
.skip-link:focus {
  top:10px
}
.site-header {
  position:sticky;
  top:0;
  height:72px;
  background:#ffffffed;
  backdrop-filter:blur(18px);
  z-index:30;
  border-bottom:1px solid #edf2f8
}
.header-inner {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.brand {
  display:flex;
  align-items:center
}
.wordmark {
  font-family:Arial,sans-serif;
  letter-spacing:-1.3px;
  font-size:27px;
  line-height:1;
  font-weight:800
}
.brand-o {
  position:relative
}
.brand-o:after {
  content:"";
  height:2px;
  background:white;
  left:0;
  right:0;
  top:50%;
  position:absolute;
  transform:rotate(-28deg)
}
.desktop-nav {
  display:flex;
  align-items:center;
  gap:32px;
  font-size:14px
}
.desktop-nav>a,.nav-products summary {
  padding:22px 0
}
.desktop-nav a:hover {
  color:var(--blue)
}
.nav-products {
  position:relative
}
.nav-products summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px
}
.nav-products summary::-webkit-details-marker {
  display:none
}
.product-dropdown {
  position:absolute;
  top:63px;
  left:-25px;
  width:360px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:white;
  box-shadow:var(--shadow)
}
.product-dropdown a {
  display:flex;
  gap:13px;
  align-items:center;
  padding:15px;
  border-radius:7px
}
.product-dropdown a:hover {
  background:var(--pale)
}
.product-dropdown strong {
  font-size:15px;
  display:block
}
.product-dropdown small {
  font-size:14px;
  display:block;
  color:var(--muted);
  margin-top:4px
}
.header-actions {
  display:flex;
  align-items:center;
  gap:10px
}
.mobile-menu-button,.mobile-menu {
  display:none
}
.product-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:42px;
  height:42px;
  border-radius:10px;
  background:linear-gradient(145deg,#609cff,#2667f7);
  color:#fff;
  box-shadow:inset 0 1px 3px #ffffff88
}
.product-icon.hiring {
  background:linear-gradient(145deg,#b299fa,#8154df)
}
.product-icon.sm {
  width:34px;
  height:34px;
  border-radius:8px
}
.hero {
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 90% 30%,#e5efff8c,transparent 65%),linear-gradient(120deg,#fcfeff,#f3f8ff)
}
.hero-inner {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr);
  gap:40px;
  align-items:center;
  padding:35px 0 34px;
  z-index:1
}
.hero-copy {
  padding:20px 0
}
.hero-kicker {
  font-size:15px;
  color:#5c708d;
  letter-spacing:.04em;
  margin-bottom:15px
}
.hero h1 {
  font-size:clamp(38px,3.35vw,56px);
  line-height:1.28;
  font-weight:700;
  letter-spacing:-1.5px;
  margin-bottom:22px
}
.hero-subtitle {
  font-size:16px;
  line-height:1.95;
  max-width:480px;
  margin-bottom:27px
}
.hero-subtitle>span {
  display:inline-block;
  margin-top:5px
}
.hero-note {
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:14px;
  color:#59708d;
  margin-top:23px;
  max-width:485px
}
.hero-note svg {
  color:var(--blue);
  margin-top:4px
}
.hero-consult {
  margin-top:22px
}
.hero-glass {
  position:absolute;
  width:650px;
  height:450px;
  right:-280px;
  top:-240px;
  border:22px solid #ffffff66;
  border-radius:50%;
  box-shadow:0 0 0 2px #d6e4f880,inset 0 0 0 2px #bdd1eb42,0 0 30px #95b9dc15;
  transform:rotate(36deg);
  pointer-events:none
}
.hero-glass:after {
  content:"";
  position:absolute;
  width:900px;
  height:420px;
  top:490px;
  right:-300px;
  border:15px solid #ffffff70;
  border-radius:50%;
  box-shadow:0 0 0 2px #dae8fa88,inset 0 0 0 2px #c7d9f066;
  transform:rotate(-63deg)
}
.hero-art {
  position:relative;
  min-width:0;
  isolation:isolate;
  padding:0 0 0 5px
}
.preview-switch {
  display:inline-flex;
  gap:4px;
  padding:4px;
  background:#ffffffcf;
  border:1px solid #dae5f6;
  border-radius:30px;
  margin-bottom:23px
}
.preview-switch button {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:7px 18px;
  background:transparent;
  border:0;
  border-radius:22px;
  color:#5f7088;
  font-size:14px
}
.preview-switch button[aria-selected=true] {
  color:var(--blue);
  background:#eaf2ff
}
.app-stack {
  position:relative;
  transform:rotate(-.65deg);
  isolation:isolate;
  min-width:0
}
.app-stack:before,.app-stack:after {
  position:absolute;
  content:"";
  inset:-12px -8px 12px 17px;
  z-index:-1;
  border:1px solid #dce7f680;
  border-radius:12px;
  background:#ffffff80
}
.app-stack:after {
  inset:-23px -17px 25px 35px;
  background:#ffffff4a;
  z-index:-2
}
.preview-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:16px;
  min-height:26px
}
.demo-caption {
  font-size:14px;
  color:#607087
}
.preview-bottom .link-arrow {
  font-size:14px
}
.screen-window {
  display:flex;
  min-width:0;
  border:1px solid #dbe5f2;
  border-radius:11px;
  background:white;
  box-shadow:0 20px 45px #3b659b12;
  overflow:hidden;
  text-align:left;
  line-height:1.6
}
.screen-sidebar {
  width:91px;
  flex-shrink:0;
  padding:20px 10px;
  background:linear-gradient(180deg,#f6f9ff,#f9fbff);
  border-right:1px solid #e9eff8;
  display:flex;
  flex-direction:column
}
.screen-brand {
  font-family:Arial,sans-serif;
  font-size:14px;
  font-weight:800;
  margin:0 2px 23px;
  white-space:nowrap;
  letter-spacing:-.4px
}
.screen-brand small {
  font-family:var(--font);
  font-size:14px;
  margin-left:3px
}
.screen-nav {
  display:flex;
  align-items:center;
  gap:7px;
  border-radius:5px;
  padding:7px 5px;
  margin-bottom:7px;
  font-size:14px;
  color:#5e708b;
  white-space:nowrap
}
.screen-nav.active {
  background:#e6f0ff;
  color:var(--blue)
}
.screen-org {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:14px;
  color:#5f7087;
  margin-top:auto;
  padding-top:35px
}
.screen-main {
  min-width:0;
  flex:1
}
.screen-topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border-bottom:1px solid #edf1f7;
  padding:9px 18px;
  font-size:14px;
  color:#5f7089
}
.screen-topbar>span:first-child {
  display:flex;
  align-items:center;
  gap:7px
}
.screen-sample {
  font-size:14px;
  color:#607086
}
.screen-content {
  padding:16px 21px 17px
}
.screen-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.screen-heading>strong {
  font-size:17px;
  font-weight:650
}
.screen-shared {
  display:flex;
  gap:5px;
  align-items:center;
  font-size:14px;
  white-space:nowrap;
  color:#5f7088
}
.screen-tabs {
  display:flex;
  gap:25px;
  border-bottom:1px solid #e8eef7;
  font-size:14px;
  color:#5e7088;
  margin:10px 0 15px
}
.screen-tabs>span {
  padding:6px 0 8px
}
.screen-tabs .active {
  border-bottom:2px solid var(--blue);
  color:var(--blue)
}
.screen-note {
  display:flex;
  gap:9px;
  align-items:flex-start;
  background:#f5f8ff;
  border:1px solid #eaf0fb;
  border-radius:6px;
  padding:9px 11px;
  margin-bottom:10px
}
.screen-note>svg {
  color:var(--blue);
  margin-top:2px
}
.screen-note p {
  font-size:14px;
  color:#587191;
  line-height:1.75
}
.screen-note strong {
  font-weight:600;
  color:#365882
}
.screen-task {
  display:grid;
  grid-template-columns:16px minmax(0,1fr) 40px 46px;
  gap:9px;
  align-items:center;
  padding:11px 0;
  border-bottom:1px solid #edf2f8;
  font-size:14px;
  color:#607088
}
.task-mark {
  width:14px;
  height:14px;
  background:#eaf5ef;
  color:#317c59;
  border-radius:3px;
  display:inline-flex;
  align-items:center;
  justify-content:center
}
.screen-task>strong {
  font-size:14px;
  color:#344966;
  font-weight:500
}
.screen-task time {
  white-space:nowrap;
  font-size:14px
}
.task-owner {
  font-size:14px
}
.screen-source {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:13px;
  padding:10px 11px;
  border:1px solid #e1eafb;
  border-radius:6px;
  font-size:14px;
  background:#fcfdff
}
.screen-source>svg {
  color:#3c6dc6
}
.screen-source>span:first-of-type {
  min-width:0;
  overflow-wrap:anywhere
}
.screen-source small {
  display:block;
  font-size:14px;
  color:#617087;
  margin-top:3px
}
.screen-badge {
  flex-shrink:0;
  margin-left:auto;
  font-size:14px;
  color:#267158;
  background:#edf7f1;
  border-radius:4px;
  padding:2px 5px
}
.screen-footer {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-top:1px solid #e9eff8;
  background:#fafdff;
  color:#567190;
  font-size:14px
}
.screen-footer>svg {
  color:#376ccc
}
.screen-footer>svg:last-child {
  margin-left:auto
}
.screen-brief {
  padding:12px 0
}
.screen-brief>span,.screen-definition>span {
  display:block;
  font-size:14px;
  color:#5c708a;
  margin-bottom:6px
}
.screen-brief strong {
  display:block;
  font-size:16px;
  margin-bottom:7px
}
.screen-brief p {
  font-size:14px
}
.screen-definition {
  padding:10px 0;
  border-bottom:1px solid #edf1f7
}
.screen-definition p {
  font-size:14px
}
.screen-tags {
  display:flex;
  flex-wrap:wrap;
  gap:7px
}
.screen-tags span {
  background:#f2f5fc;
  color:#597096;
  font-size:14px;
  border-radius:4px;
  padding:3px 8px
}
.screen-question {
  padding:10px 12px;
  margin-top:10px;
  border:1px solid #e7eafb;
  border-left:3px solid #b6a4f0;
  border-radius:5px;
  background:#fefeff
}
.screen-question>span {
  font-size:14px;
  color:#7963a9
}
.screen-question p {
  font-size:14px;
  line-height:1.85;
  color:#425572;
  margin-top:6px
}
.screen-review {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color:#59718a;
  margin-top:13px
}
.screen-review svg {
  color:var(--green)
}
.screen-observation {
  border:1px solid #dfece7;
  background:#f8fcfa;
  border-radius:6px;
  padding:13px 15px;
  margin-top:12px
}
.screen-observation>span {
  display:block;
  font-size:14px;
  color:var(--green);
  margin-bottom:7px
}
.screen-observation>strong {
  display:block;
  font-size:14px;
  color:#344b5e;
  margin-bottom:7px
}
.screen-observation>p {
  font-size:14px;
  line-height:1.8
}
.screen-observation.pending {
  border-color:#e2e8f6;
  background:#f8faff
}
.screen-observation.pending>span {
  color:#557096
}
.benefits {
  border-bottom:1px solid #e8eef7;
  background:#fcfdff
}
.benefit-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  padding:26px 0
}
.benefit {
  display:flex;
  align-items:center;
  gap:15px;
  padding:0 22px;
  border-right:1px solid #e5ecf6;
  min-width:0
}
.benefit:first-child {
  padding-left:0
}
.benefit:last-child {
  padding-right:0;
  border:0
}
.benefit>svg {
  color:var(--blue)
}
.benefit h3 {
  font-size:15px;
  margin-bottom:4px
}
.benefit p {
  font-size:14px;
  color:#5e708a
}
.products-section {
  padding:46px 0 60px
}
.products-section h2 {
  font-size:30px
}
.product-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:23px
}
.product-card {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);
  gap:22px;
  align-items:center;
  padding:27px;
  border:1px solid #dce6f5;
  border-radius:10px;
  background:linear-gradient(115deg,#fff 35%,#f5f9ff);
  transition:box-shadow .2s
}
.product-card:hover {
  box-shadow:var(--shadow)
}
.product-card.hire {
  background:linear-gradient(115deg,#fff 35%,#f9f7ff)
}
.card-title {
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:18px
}
.card-title h3 {
  font-size:19px;
  letter-spacing:-.5px;
  white-space:nowrap
}
.card-title .product-icon {
  width:38px;
  height:38px
}
.card-copy h4 {
  font-size:19px;
  margin-bottom:12px;
  line-height:1.55
}
.card-copy p {
  font-size:14px;
  line-height:1.85;
  margin-bottom:20px
}
.card-preview {
  min-width:0
}
.product-snippet {
  background:#ffffffcf;
  border:1px solid #e0e8f6;
  border-radius:8px;
  padding:20px 17px;
  box-shadow:0 10px 30px #5375a509
}
.snippet-label {
  display:flex;
  gap:7px;
  align-items:center;
  font-size:14px;
  color:#577097;
  margin-bottom:17px
}
.product-snippet>strong {
  display:block;
  font-size:14px;
  margin-bottom:16px;
  font-weight:550
}
.product-snippet>p {
  font-size:14px;
  display:flex;
  align-items:center;
  gap:6px;
  margin:11px 0;
  line-height:1.7
}
.product-snippet>p svg {
  color:var(--green)
}
.product-snippet>p>span {
  display:block;
  flex-shrink:0;
  color:#78669a;
  font-size:14px
}
.hire .product-snippet>p {
  display:block
}
.hire .product-snippet>p>span {
  margin-bottom:2px
}
.product-snippet small {
  font-size:14px;
  color:#627085;
  display:block;
  margin-top:20px;
  border-top:1px solid #edf1f7;
  padding-top:10px
}
.ai-section {
  background:linear-gradient(180deg,#f6f9ff,#f8faff);
  border-block:1px solid #e9eff8
}
.ai-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:85px;
  align-items:center
}
.ai-copy>p {
  font-size:16px;
  line-height:1.9;
  margin:21px 0 27px
}
.ai-tabs {
  display:flex;
  flex-direction:column;
  gap:8px
}
.ai-tab {
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  padding:15px;
  border:1px solid transparent;
  background:transparent;
  border-radius:8px;
  font-size:15px
}
.ai-tab>span {
  flex:1;
  min-width:0
}
.ai-tab>svg {
  color:#5b708d
}
.ai-tab small {
  display:block;
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
  margin-top:5px
}
.ai-tab[aria-selected=true] {
  background:white;
  border-color:#dce7f8;
  box-shadow:0 5px 18px #4975aa08
}
.ai-tab[aria-selected=true]>svg {
  color:var(--blue)
}
.result-window {
  background:white;
  border:1px solid #dce5f3;
  border-radius:11px;
  box-shadow:var(--shadow);
  padding:0 28px 24px
}
.result-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:13px 19px;
  margin:0 -28px 24px;
  border-bottom:1px solid #e9eff7;
  font-size:14px;
  color:#5c708b
}
.result-toolbar>span:first-child {
  display:flex;
  gap:8px;
  align-items:center
}
.result-tag {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:4px;
  background:#edf7f1;
  color:var(--green);
  font-size:14px;
  margin-bottom:15px
}
.result-window h3 {
  font-size:23px;
  margin-bottom:10px
}
.result-meta {
  font-size:14px;
  color:#5d708c;
  padding-bottom:18px;
  border-bottom:1px solid #e9eff8;
  margin-bottom:19px
}
.result-block h4 {
  font-size:14px;
  margin:16px 0 8px
}
.result-block p,.result-block li {
  font-size:14px;
  line-height:1.9;
  color:#5c718b
}
.result-block ul {
  padding-left:19px;
  margin:9px 0
}
.result-file {
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px;
  margin-top:20px;
  border:1px solid #e2eafb;
  border-radius:7px;
  background:#f8faff;
  font-size:14px
}
.result-file>span {
  min-width:0;
  overflow-wrap:anywhere
}
.result-file>svg {
  color:var(--blue)
}
.result-file small {
  font-size:14px;
  color:#5d708a
}
.result-file .icon-btn {
  margin-left:auto;
  flex-shrink:0
}
.result-demo-note {
  font-size:14px;
  margin-top:13px;
  color:#5c708a
}
.solutions-heading {
  max-width:730px
}
.solutions-heading>p {
  font-size:16px;
  line-height:1.9;
  margin:20px 0 0
}
.connected-flow {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:30px;
  margin-top:36px
}
.flow-item {
  border-top:2px solid #e1eaf9;
  padding:24px 0 0;
  position:relative
}
.flow-item:before {
  content:"";
  width:7px;
  height:7px;
  background:#6997f4;
  position:absolute;
  top:-4px;
  left:0;
  border-radius:50%;
  box-shadow:0 0 0 5px #f0f5ff
}
.flow-item>span {
  font-size:14px;
  color:#5b718d
}
.flow-item h3 {
  font-size:19px;
  margin:13px 0 11px
}
.flow-item p {
  font-size:14px;
  line-height:1.9
}
.flow-item .flow-label {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:14px;
  color:#3c6fbb;
  margin-top:19px
}
.flow-label.purple {
  color:#7e5fb3
}
.independent-callout {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  padding:19px 22px;
  margin-top:33px;
  border:1px solid #dfe7f3;
  border-radius:8px;
  background:#fafcff
}
.independent-callout>div {
  display:flex;
  align-items:flex-start;
  gap:12px
}
.independent-callout>div>svg {
  color:var(--blue);
  margin-top:2px
}
.independent-callout p {
  font-size:14px
}
.independent-callout>.link-arrow {
  white-space:nowrap
}
.cta-section {
  background:radial-gradient(ellipse at 85% 130%,#dfeaff,#f4f8ff 75%);
  border-top:1px solid #e7eef9;
  padding:57px 0
}
.cta-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px
}
.cta-inner h2 {
  font-size:33px;
  line-height:1.5
}
.cta-inner p {
  font-size:15px;
  margin-top:12px
}
.site-footer {
  padding:45px 0 23px
}
.footer-top {
  display:flex;
  justify-content:space-between;
  gap:40px;
  margin-bottom:35px
}
.footer-brand p {
  font-size:14px;
  margin-top:18px;
  line-height:1.9
}
.footer-links {
  display:flex;
  gap:70px;
  font-size:14px
}
.footer-links strong {
  display:block;
  margin-bottom:15px;
  font-size:14px
}
.footer-links a {
  display:block;
  margin-top:9px;
  color:#5d708a
}
.footer-links a:hover {
  color:var(--blue)
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid #e8eef7;
  padding-top:20px;
  font-size:14px;
  color:#5d718a
}
.product-subnav {
  position:sticky;
  top:72px;
  background:#ffffffed;
  backdrop-filter:blur(15px);
  border-bottom:1px solid var(--line);
  z-index:22
}
.subnav-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:60px
}
.subnav-brand {
  font-size:16px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px
}
.subnav-links {
  display:flex;
  align-items:center;
  gap:25px;
  font-size:14px
}
.subnav-links a:hover {
  color:var(--blue)
}
.product-hero .hero-inner {
  padding:50px 0 44px
}
.product-hero .hero-art {
  padding-top:23px
}
.product-hero .demo-caption {
  display:block;
  text-align:right;
  margin-top:20px
}
.product-hero .orbit {
  display:none
}
.hiring-theme {
  background:radial-gradient(ellipse at 85% 25%,#ede9fc7c,transparent 60%),linear-gradient(110deg,#fcfeff,#f6f9ff)
}
.feature-banner {
  background:#fcfdff;
  border-block:1px solid var(--line);
  padding:23px 0
}
.feature-banner>.container {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:25px;
  font-size:14px;
  color:#5a7190
}
.feature-banner span {
  display:flex;
  gap:9px;
  align-items:center
}
.feature-banner svg {
  color:var(--blue)
}
.feature-row {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:90px;
  align-items:center;
  margin-bottom:80px
}
.feature-row:last-child {
  margin-bottom:0
}
.feature-row>* {
  min-width:0
}
.feature-row.reverse .feature-text {
  order:2
}
.feature-number {
  display:block;
  font-size:14px;
  letter-spacing:.1em;
  color:#587096;
  margin-bottom:17px
}
.feature-text h2 {
  font-size:30px;
  margin-bottom:19px
}
.feature-text p {
  font-size:16px;
  line-height:1.95
}
.feature-detail {
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:23px;
  font-size:14px;
  color:#567190
}
.feature-detail svg {
  color:var(--blue);
  margin-top:3px
}
.feature-visual {
  min-width:0;
  background:#f4f7fd;
  border:1px solid #e5ecf8;
  border-radius:12px;
  padding:28px
}
.detail-sheet {
  background:white;
  border:1px solid #dee7f5;
  border-radius:8px;
  padding:24px;
  box-shadow:0 8px 24px #3b639909;
  min-width:0
}
.sheet-label {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:14px;
  color:#5c708b;
  margin-bottom:16px
}
.detail-sheet h3 {
  font-size:20px;
  margin-bottom:18px
}
.sheet-line {
  display:flex;
  gap:17px;
  border-top:1px solid #edf1f7;
  padding:14px 0;
  font-size:14px
}
.sheet-line>span {
  min-width:57px;
  color:#5b708d;
  font-size:14px
}
.sheet-line strong {
  font-weight:500
}
.sheet-tag {
  display:inline-block;
  font-size:14px;
  color:#4a70ab;
  padding:3px 7px;
  margin:2px;
  background:#f4f8ff;
  border:1px solid #e0eafd;
  border-radius:4px
}
.summary-block {
  padding:14px;
  background:#f5f8ff;
  border:1px solid #e4edfc;
  border-radius:6px;
  margin-top:20px;
  font-size:14px
}
.summary-block strong {
  display:flex;
  align-items:center;
  gap:6px;
  color:#4670ad;
  font-weight:550;
  margin-bottom:8px
}
.summary-block p {
  font-size:14px;
  line-height:1.85
}
.question-item {
  padding-left:13px;
  border-left:2px solid #a5bff0;
  margin:23px 0
}
.question-item small {
  font-size:14px;
  color:#4d70a0
}
.question-item p {
  font-size:14px;
  margin-top:8px;
  line-height:1.85;
  color:#4f6582
}
.transcript-line {
  display:flex;
  gap:11px;
  margin-top:20px
}
.avatar {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:30px;
  height:30px;
  border-radius:50%;
  font-size:14px;
  background:#ede4d8;
  color:#88663f
}
.avatar.blue {
  background:#e2edf9;
  color:#557194
}
.avatar.pink {
  background:#f5e7ed;
  color:#8e6375
}
.transcript-line strong {
  display:block;
  font-size:14px;
  margin-bottom:6px
}
.transcript-line p {
  font-size:14px;
  line-height:1.9
}
.quality-note {
  padding:17px 20px;
  background:#f6f9ff;
  border-left:3px solid #9dbcf4;
  font-size:14px;
  line-height:1.9;
  margin-top:37px
}
.family-pair {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  margin-bottom:26px
}
.family-pair .product-icon {
  width:54px;
  height:54px
}
.family-pair>svg {
  color:#577097
}
.product-connect {
  text-align:center;
  background:#f7faff
}
.product-connect p {
  max-width:720px;
  margin:21px auto 27px;
  font-size:16px;
  line-height:1.95
}
.simple-hero {
  padding:62px 0 40px;
  text-align:center;
  background:linear-gradient(#f5f9ff,#fff)
}
.simple-hero h1 {
  font-size:43px;
  letter-spacing:-1px;
  font-weight:650
}
.simple-hero p {
  font-size:16px;
  max-width:700px;
  line-height:1.95;
  margin:19px auto 0
}
.pricing-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:1040px;
  margin:auto;
  gap:26px
}
.price-card {
  padding:33px;
  border:1px solid var(--line);
  border-radius:11px
}
.price-card h2 {
  font-size:27px;
  margin:20px 0 10px
}
.price-card>p {
  font-size:15px
}
.price-value {
  font-size:29px;
  font-weight:600;
  margin:27px 0
}
.price-value small {
  display:block;
  font-size:14px;
  font-weight:400;
  color:#5a708e;
  margin-top:6px
}
.price-card .btn {
  width:100%;
  margin-bottom:21px
}
.price-features {
  list-style:none;
  padding:0;
  margin:0
}
.price-features li {
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  color:#5b718e;
  padding:10px 0
}
.price-features svg {
  color:var(--blue);
  margin-top:3px
}
.price-card .price-footnote {
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:20px;
  font-size:14px;
  line-height:1.9
}
.faq-wrap {
  max-width:920px;
  margin:auto
}
.faq-wrap>h2 {
  font-size:30px;
  text-align:center;
  margin-bottom:28px
}
.faq {
  border-bottom:1px solid #dfe7f4;
  padding:21px 0
}
.faq summary {
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  font-weight:550;
  font-size:16px
}
.faq summary::-webkit-details-marker {
  display:none
}
.faq summary:after {
  content:"+";
  font-size:23px;
  color:#5a7190;
  font-weight:400
}
.faq[open] summary:after {
  content:"−"
}
.faq p {
  padding-top:15px;
  font-size:15px;
  line-height:1.95
}
.resource-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:23px;
  margin-bottom:68px
}
.resource-card {
  padding:28px;
  border:1px solid var(--line);
  border-radius:9px
}
.resource-card>svg {
  color:var(--blue);
  margin-bottom:23px
}
.resource-card h2 {
  font-size:23px;
  margin-bottom:15px
}
.resource-card p {
  font-size:15px;
  line-height:1.9
}
.resource-card .link-arrow {
  margin-top:25px
}
.help-chapter {
  border-top:1px solid var(--line);
  padding:30px 0
}
.help-chapter h3 {
  font-size:23px;
  margin-bottom:17px
}
.help-chapter p,.help-chapter ol {
  font-size:15px;
  line-height:1.95;
  color:var(--muted);
  margin-bottom:15px
}
.help-chapter ol {
  padding-left:22px;
  line-height:2.1
}
.about-layout {
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:95px;
  align-items:center
}
.about-layout>div>p {
  font-size:16px;
  line-height:1.95;
  margin-top:22px
}
.about-products a {
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:25px 0;
  border-bottom:1px solid var(--line)
}
.about-products a:first-child {
  padding-top:0
}
.about-products h3 {
  font-size:21px;
  margin-bottom:9px
}
.about-products p {
  font-size:15px
}
.about-products a>svg {
  color:var(--blue);
  margin-top:10px
}
.principle-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:50px
}
.principle-grid article {
  border-top:1px solid #d9e5f7;
  padding-top:22px
}
.principle-grid article>span {
  font-size:14px;
  color:#587093
}
.principle-grid h3 {
  font-size:22px;
  margin:14px 0 13px
}
.principle-grid p {
  font-size:15px;
  line-height:1.95
}
dialog {
  padding:0;
  border:1px solid #dce6f5;
  border-radius:13px;
  width:min(550px,calc(100% - 28px));
  max-height:calc(100dvh - 36px);
  overflow:auto;
  background:#fff;
  color:var(--ink);
  box-shadow:0 30px 90px #15325e40
}
dialog::backdrop {
  background:#203c6059;
  backdrop-filter:blur(4px)
}
.dialog-content {
  padding:32px
}
.dialog-close {
  position:absolute;
  right:12px;
  top:12px;
  z-index:2
}
.dialog-eyebrow {
  font-size:14px;
  color:var(--blue);
  margin-bottom:12px;
  letter-spacing:.08em
}
.dialog-content h2 {
  font-size:25px;
  padding-right:24px;
  margin-bottom:11px
}
.dialog-description {
  font-size:14px;
  line-height:1.9;
  margin-bottom:21px
}
.local-notice {
  font-size:14px;
  line-height:1.85;
  background:#f5f8ff;
  border:1px solid #e1eafa;
  border-radius:6px;
  padding:11px 13px;
  margin-bottom:21px;
  color:#5a7090
}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}
.form-field {
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:17px;
  font-size:14px;
  color:#495f7c;
  min-width:0
}
.form-field input,.form-field select,.form-field textarea {
  width:100%;
  min-width:0;
  padding:11px 12px;
  background:white;
  border:1px solid #cfdbed;
  border-radius:6px;
  font-size:15px;
  min-height:44px;
  line-height:1.5
}
.form-field textarea {
  height:95px;
  resize:vertical
}
.form-field input::placeholder,.form-field textarea::placeholder {
  color:#5f7088
}
.form-notice {
  font-size:14px;
  line-height:1.85;
  margin:0 0 20px;
  color:#5d708b
}
.form-submit {
  width:100%
}
.form-success {
  border:1px solid #cce8dc;
  background:#f3fbf6;
  border-radius:7px;
  padding:15px;
  margin-top:18px;
  font-size:14px;
  color:#2c7658
}
.form-success p {
  font-size:14px;
  color:#507761;
  margin-top:6px
}
.choice-list {
  display:flex;
  flex-direction:column;
  gap:13px
}
.choice-card {
  display:flex;
  align-items:center;
  gap:15px;
  text-align:left;
  padding:18px;
  border:1px solid var(--line);
  border-radius:8px;
  background:white
}
.choice-card:hover {
  background:#f7faff
}
.choice-card>span:nth-child(2) {
  min-width:0;
  flex:1
}
.choice-card strong {
  display:block;
  font-size:16px
}
.choice-card small {
  display:block;
  font-size:14px;
  color:var(--muted);
  margin-top:5px
}
.choice-card>svg {
  margin-left:auto;
  color:#567196
}
.demo-dialog {
  width:min(980px,calc(100% - 28px))
}
.demo-dialog .dialog-content {
  padding:32px 40px
}
.demo-dialog .screen-window {
  margin-top:24px;
  box-shadow:none
}
.demo-dialog .screen-content {
  padding:23px 32px
}
.demo-dialog .screen-note p,.demo-dialog .screen-task>strong,.demo-dialog .screen-question p,.demo-dialog .screen-source {
  font-size:14px
}
.demo-dialog .screen-task {
  padding:14px 0;
  grid-template-columns:16px minmax(0,1fr) 60px 64px
}
.demo-dialog .task-owner,.demo-dialog .screen-task time {
  font-size:14px
}
.demo-dialog .screen-question {
  padding:13px 17px;
  margin-top:14px
}
.demo-dialog .screen-source small {
  font-size:14px
}
.demo-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin-top:23px
}
.demo-step-label {
  font-size:14px;
  color:#57718e
}
.demo-steps {
  display:flex;
  gap:5px;
  margin-top:9px
}
.demo-steps span {
  display:block;
  height:3px;
  width:28px;
  background:#e2eafa;
  border-radius:3px
}
.demo-steps .active {
  background:var(--blue)
}
.demo-disclosure {
  font-size:14px;
  color:#5c708b;
  margin-top:20px;
  line-height:1.9
}
.toast {
  position:fixed;
  left:50%;
  bottom:25px;
  transform:translate(-50%,15px);
  padding:13px 20px;
  border-radius:8px;
  background:#1d3557;
  color:#fff;
  z-index:100;
  font-size:14px;
  max-width:90vw;
  width:max-content;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s
}
.toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}

/* Navigation, static fallbacks and clear interaction states */ .js-only {
  display:none!important
}
.js-ready .js-only {
  display:inline-flex!important
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}
.no-script {
  padding-block:24px;
  font-size:14px
}
[aria-current=page] {
  color:var(--blue)!important;
  font-weight:650;
  text-decoration:underline;
  text-underline-offset:7px
}
.desktop-nav {
  gap:24px
}
.product-dropdown a {
  min-height:54px;
  font-weight:550
}
.mobile-nav {
  display:none
}
.quick-products {
  display:flex;
  gap:12px;
  margin-top:26px
}
.quick-products a {
  border-left:2px solid #a9c2f0;
  padding:4px 14px;
  flex:1;
  min-width:0
}
.quick-products strong {
  font-size:15px;
  display:block
}
.quick-products span {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color:var(--muted);
  margin-top:5px
}
.quick-products svg {
  width:14px;
  height:14px
}
.hero-subtitle {
  margin-bottom:24px
}
.hero-note {
  font-size:14px;
  color:var(--muted)
}
.hero-consult {
  margin-top:18px
}
.product-promise {
  color:var(--ink);
  font-weight:650;
  font-size:21px!important;
  line-height:1.5!important
}
.section-copy {
  font-size:16px;
  line-height:1.9;
  margin:20px 0 24px
}
.compact-section {
  padding:52px 0
}
.product-card {
  padding:26px;
  gap:20px
}
.product-card .product-snippet {
  box-shadow:none
}
.product-snippet {
  padding:22px 18px
}
.product-snippet strong {
  font-size:15px
}
.product-snippet p {
  font-size:14px
}
.connected-flow {
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.screen-sidebar {
  width:106px;
  padding:18px 9px
}
.screen-brand {
  font-size:13px;
  letter-spacing:-.5px
}
.screen-brand small {
  font-size:11px
}
.screen-nav {
  font-size:13px;
  gap:6px;
  padding:7px 3px
}
.screen-heading>strong {
  font-size:17px
}
.screen-shared {
  display:none
}
.screen-content {
  padding:18px
}
.screen-task {
  grid-template-columns:16px minmax(0,1fr) 50px 59px;
  gap:8px
}
.screen-task strong {
  font-size:14px
}
.screen-task time,.task-owner {
  font-size:13px
}
.screen-source {
  font-size:14px
}
.screen-source small {
  font-size:13px
}
.screen-badge {
  display:none
}
.screen-footer-extra {
  display:none
}
.screen-tabs {
  font-size:13px;
  gap:20px
}
.screen-note p {
  font-size:14px
}
.proof-card {
  background:#fff;
  padding:28px;
  border:1px solid var(--line);
  border-radius:10px
}
.proof-card h3 {
  font-size:22px;
  margin-bottom:20px
}
blockquote {
  margin:12px 0;
  padding-left:16px;
  border-left:3px solid #b4c9ed;
  font-size:15px;
  line-height:1.9;
  color:#3b506e
}
.proof-card .link-arrow {
  margin-top:22px
}
.target-question {
  padding:16px 18px;
  border-left:3px solid #8e71c9;
  background:#f8f6ff;
  border-radius:0 7px 7px 0;
  margin-top:16px
}
.target-question p {
  color:#3f375c;
  font-size:15px;
  line-height:1.9
}
.target-question .sheet-label {
  color:#654595;
  margin-bottom:8px
}
.source-excerpt {
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fafcff;
  margin-top:16px
}
.source-excerpt .sheet-label {
  margin-bottom:8px
}
.source-excerpt p {
  font-size:14px;
  line-height:1.9
}
.source-excerpt blockquote {
  margin:0;
  border:0;
  padding:0
}
.screen-window .source-excerpt {
  margin-top:0;
  padding:12px 14px
}
.screen-window .target-question {
  padding:12px 14px
}
.screen-window .target-question p {
  font-size:14px
}
.screen-window .sheet-label {
  font-size:13px
}
.capability-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px
}
.capability-grid article {
  border-top:2px solid #dce6f6;
  padding-top:18px
}
.capability-grid article>span {
  font-size:14px;
  color:var(--muted)
}
.capability-grid h3 {
  font-size:19px;
  line-height:1.6;
  margin:12px 0
}
.capability-grid p {
  font-size:15px;
  line-height:1.9
}
.case-layout {
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  gap:64px;
  align-items:start
}
.case-intro {
  position:sticky;
  top:165px
}
.case-selector {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:24px
}
.case-selector [aria-pressed=true] {
  border-color:var(--blue);
  background:#edf3ff;
  color:var(--blue)
}
.case-disclosure {
  font-size:14px;
  line-height:1.9;
  margin:22px 0;
  color:var(--muted)
}
.case-panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:24px
}
.case-profile {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line)
}
.case-profile strong {
  font-size:20px
}
.case-profile span {
  font-size:14px;
  color:var(--muted)
}
.case-step {
  border-bottom:1px solid var(--line)
}
.case-step:last-child {
  border:0
}
.case-step>summary {
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  padding:19px 0;
  list-style:none;
  font-size:17px;
  font-weight:600
}
.case-step>summary:after {
  content:'+';
  font-size:22px;
  font-weight:400;
  margin-left:auto;
  color:var(--blue)
}
.case-step[open]>summary:after {
  content:'−'
}
.case-step>summary::-webkit-details-marker {
  display:none
}
.step-count {
  font-size:14px;
  color:var(--blue);
  font-weight:650
}
.case-step-body {
  padding-bottom:20px
}
.case-facts {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:22px
}
.case-facts strong {
  font-size:15px;
  font-weight:550;
  line-height:1.9
}
.case-facts .sheet-label {
  margin-bottom:8px
}
.case-reason {
  font-size:15px;
  margin:17px 0 0;
  line-height:1.9
}
.source-detail {
  margin-top:18px;
  border:1px solid #d9e3f1;
  border-radius:6px;
  padding:12px 15px;
  background:#fff
}
.source-detail summary {
  cursor:pointer;
  color:var(--blue);
  font-size:14px;
  line-height:1.8;
  padding:4px 0
}
.source-note {
  font-size:14px;
  line-height:1.8
}
.review-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.review-pair p {
  padding:16px;
  border:1px solid #dce6f2;
  border-radius:6px;
  font-size:15px;
  line-height:1.9;
  background:#fbfdff
}
.decision-note {
  background:#f4f7fc;
  padding:16px 18px;
  margin-top:18px;
  border-radius:7px
}
.decision-note strong {
  font-size:16px
}
.decision-note p {
  font-size:15px;
  margin-top:8px;
  line-height:1.9
}
.input-output,.work-journey {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px
}
.input-output h3 {
  font-size:21px;
  margin-bottom:14px
}
.input-output p {
  font-size:15px;
  line-height:2
}
.input-output .link-arrow {
  margin-top:16px
}
.work-journey>article {
  padding:24px;
  border:1px solid var(--line);
  border-radius:9px
}
.work-journey h3 {
  font-size:21px;
  margin:14px 0
}
.work-journey p {
  font-size:15px;
  line-height:1.9
}
.action-list {
  font-size:14px;
  padding-left:20px;
  color:var(--muted);
  line-height:2.2
}
.product-connect {
  padding:48px 0
}
.price-card .btn {
  margin:22px 0 0
}
.price-card .link-arrow {
  margin-top:18px
}
.price-features {
  padding-left:20px;
  list-style:disc
}
.price-features li {
  display:list-item;
  padding:6px 0
}
.purchase-note {
  font-size:14px;
  line-height:1.9;
  margin:20px 0
}
.purchase-checks {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px
}
.purchase-checks article {
  border-top:2px solid #d9e4f6;
  padding-top:18px
}
.purchase-checks h3 {
  font-size:19px;
  margin-bottom:12px
}
.purchase-checks p {
  font-size:15px;
  line-height:1.9
}
.guide-index {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:30px
}
.guide-index a {
  border:1px solid var(--line);
  padding:8px 16px;
  border-radius:6px;
  font-size:14px
}
.help-chapter {
  max-width:920px;
  margin:auto;
  padding:40px 0
}
.help-chapter h2 {
  font-size:28px;
  margin-bottom:18px
}
.guide-steps li {
  padding:8px 0
}
.guide-completion {
  padding:16px 18px;
  margin:20px 0;
  background:#f6f9ff;
  border-left:3px solid #a2bff0;
  font-size:15px;
  color:#405774
}
.principle-grid {
  margin-top:32px
}
.about-products {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px
}
.about-products a:first-child {
  padding:25px 0
}
.footer-links a {
  padding:4px 0;
  margin-top:4px
}
.footer-links {
  gap:64px
}

/* A fixed title and action area keep every walkthrough step operable. */ .demo-dialog {
  width:min(880px,calc(100% - 28px));
  height:min(780px,calc(100dvh - 28px));
  max-height:calc(100dvh - 28px);
  overflow:hidden
}
.demo-shell {
  height:100%;
  display:flex;
  flex-direction:column;
  min-height:0
}
.demo-header {
  position:relative;
  flex-shrink:0;
  padding:24px 30px 16px;
  border-bottom:1px solid var(--line)
}
.demo-header>.icon-btn {
  position:absolute;
  top:12px;
  right:12px
}
.demo-header h2 {
  font-size:26px;
  padding-right:30px;
  margin-bottom:8px
}
.demo-header h2:focus {
  outline:none
}
.demo-header h2:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:4px
}
.demo-header .dialog-eyebrow {
  padding-right:35px;
  margin-bottom:10px
}
.demo-header .dialog-description {
  margin:0;
  font-size:14px
}
.demo-scroll {
  min-height:0;
  overflow:auto;
  flex:1;
  padding:20px 30px;
  overscroll-behavior:contain
}
.demo-scroll .screen-window {
  margin-top:0
}
.demo-scroll .screen-sidebar {
  display:none
}
.demo-scroll .screen-content {
  padding:18px
}
.demo-controls {
  margin:0;
  padding:16px 24px;
  border-top:1px solid var(--line);
  background:#fff;
  flex-shrink:0;
  gap:12px
}
.demo-controls .btn {
  min-height:44px
}
.demo-controls .btn:disabled {
  cursor:default;
  opacity:.5
}
.demo-disclosure {
  font-size:14px;
  color:var(--muted);
  line-height:1.8
}
.dialog-content .form-notice {
  font-size:14px;
  color:var(--muted)
}
.form-field input::placeholder,.form-field textarea::placeholder {
  color:#596a81
}
.form-field textarea {
  height:125px
}
#search-count {
  font-size:14px;
  margin:10px 0 18px
}
#search-results .choice-card>span {
  min-width:0;
  flex:1
}
#search-results .choice-card strong {
  font-size:16px
}

/* Laptop and tablet layouts retain readable text instead of scaling the UI. */ @media(max-width:1279px) {
    .container {
    width:90%
  }
    .desktop-nav {
    gap:18px;
    font-size:13px
  }
    .header-actions {
    gap:6px
  }
    .header-actions>.btn {
    padding-inline:12px
  }
    .hero-inner {
    gap:28px
  }
    .hero h1 {
    font-size:42px
  }
    .hero-subtitle {
    font-size:15px
  }
    .screen-sidebar {
    display:none
  }
    .product-card {
    grid-template-columns:1fr
  }
    .product-snippet {
    padding:18px
  }
    .case-layout {
    gap:38px
  }
    .ai-layout {
    gap:40px
  }
    .capability-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
    .purchase-checks {
    grid-template-columns:1fr 1fr
  }
    .work-journey {
    gap:18px
  }
    .work-journey>article {
    padding:20px
  }
    .about-layout {
    gap:45px
  }
}
@media(max-width:1023px) {
    .desktop-nav,.header-actions>.btn {
    display:none!important
  }
    .mobile-nav {
    display:block
  }
    .mobile-nav>summary {
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    cursor:pointer;
    list-style:none
  }
    .mobile-nav>summary::-webkit-details-marker {
    display:none
  }
    .mobile-nav nav {
    position:absolute;
    right:0;
    left:0;
    top:71px;
    background:#fff;
    padding:16px 5%;
    box-shadow:0 15px 25px #284e7717;
    border-bottom:1px solid var(--line);
    max-height:calc(100dvh - 72px);
    overflow:auto
  }
    .mobile-nav nav a {
    display:block;
    padding:12px 8px;
    font-size:16px
  }
    .hero-inner {
    grid-template-columns:1fr;
    padding:36px 0;
    gap:34px
  }
    .hero-copy {
    padding:0;
    max-width:680px
  }
    .hero-art {
    width:100%;
    max-width:700px;
    margin:auto;
    padding:0
  }
    .hero-subtitle {
    max-width:640px;
    font-size:16px
  }
    .quick-products {
    max-width:500px
  }
    .hero h1 {
    font-size:46px
  }
    .case-layout,.ai-layout,.about-layout {
    grid-template-columns:1fr;
    gap:30px
  }
    .case-intro {
    position:static;
    max-width:720px
  }
    .case-intro .section-copy {
    margin-bottom:16px
  }
    .case-disclosure {
    margin:16px 0
  }
    .case-panel {
    max-width:900px
  }
    .input-output {
    gap:24px
  }
    .work-journey {
    grid-template-columns:1fr
  }
    .cta-inner {
    align-items:flex-start;
    flex-direction:column;
    gap:25px
  }
    .about-products {
    gap:25px
  }
}
@media(max-width:767px) {
    html {
    scroll-padding-top:152px
  }
    .container {
    width:calc(100% - 40px)
  }
    .section {
    padding:44px 0
  }
    .compact-section {
    padding:34px 0
  }
    h2 {
    font-size:27px;
    letter-spacing:-.4px
  }
    .site-header {
    height:64px
  }
    .wordmark {
    font-size:26px
  }
    .mobile-nav nav {
    top:63px;
    max-height:calc(100dvh - 64px)
  }
    .header-inner {
    gap:12px
  }
    .header-actions {
    gap:4px
  }
    .hero-inner,.product-hero .hero-inner {
    padding:30px 0;
    gap:30px
  }
    .hero h1 {
    font-size:clamp(30px,8.3vw,42px);
    letter-spacing:-1px;
    margin-bottom:18px
  }
    .hero-kicker {
    font-size:14px;
    letter-spacing:0;
    line-height:1.8;
    margin-bottom:14px
  }
    .hero-subtitle {
    font-size:15px;
    line-height:1.9;
    margin-bottom:22px
  }
    .hero .btn-lg {
    font-size:14px;
    padding:11px 18px;
    min-height:46px
  }
    .hero-note {
    margin-top:18px
  }
    .quick-products {
    gap:12px;
    margin-top:24px
  }
    .quick-products a {
    padding:3px 0 3px 10px
  }
    .quick-products span {
    font-size:13px;
    gap:4px;
    flex-wrap:wrap
  }
    .hero-art,.product-hero .hero-art {
    padding:0
  }
    .app-stack {
    transform:none
  }
    .app-stack:after {
    display:none
  }
    .app-stack:before {
    inset:-7px -3px 7px 12px
  }
    .preview-switch {
    margin-bottom:18px
  }
    .preview-switch button {
    min-height:42px;
    font-size:14px;
    padding:8px 17px
  }
    .preview-bottom {
    flex-wrap:wrap;
    gap:10px
  }
    .demo-caption,.preview-bottom .link-arrow {
    font-size:13px
  }
    .screen-content {
    padding:16px
  }
    .screen-topbar {
    font-size:13px;
    padding:10px 15px
  }
    .screen-sample {
    font-size:12px
  }
    .screen-tabs {
    gap:20px;
    font-size:13px
  }
    .screen-task {
    grid-template-columns:16px minmax(0,1fr);
    gap:3px 9px
  }
    .task-mark {
    grid-column:1;
    grid-row:1
  }
    .screen-task>strong {
    grid-column:2;
    grid-row:1;
    font-size:14px
  }
    .task-owner {
    grid-column:2;
    grid-row:2
  }
    .screen-task time {
    grid-column:2;
    grid-row:2;
    justify-self:end
  }
    .screen-source {
    align-items:flex-start
  }
    .screen-source>svg {
    margin-top:4px
  }
    .screen-heading>strong {
    font-size:17px
  }
    .screen-footer {
    font-size:13px;
    padding:12px 15px
  }
    .products-section {
    padding:35px 0 42px
  }
    .section-intro {
    display:block;
    margin-bottom:22px
  }
    .section-intro>.link-arrow,.section-intro>.btn {
    margin-top:16px
  }
    .products-section h2 {
    font-size:26px
  }
    .product-grid {
    grid-template-columns:1fr;
    gap:18px
  }
    .product-card {
    padding:22px;
    gap:0
  }
    .product-card .product-snippet {
    display:none
  }
    .card-title {
    margin-bottom:16px
  }
    .card-title h3 {
    font-size:20px
  }
    .card-copy p {
    font-size:15px;
    margin-bottom:18px
  }
    .product-promise {
    font-size:21px!important
  }
    .product-promise br {
    display:none
  }
    .section-copy {
    font-size:15px;
    line-height:1.9
  }
    .proof-card {
    padding:22px
  }
    .proof-card h3 {
    font-size:21px
  }
    .connected-flow,.input-output {
    grid-template-columns:1fr;
    gap:25px
  }
    .flow-item {
    padding-top:18px
  }
    .flow-item h3 {
    font-size:20px
  }
    .flow-item p {
    font-size:15px
  }
    .independent-callout {
    flex-wrap:wrap;
    padding:18px;
    gap:16px
  }
    .independent-callout .btn {
    max-width:100%;
    white-space:normal
  }
    .cta-section {
    padding:38px 0
  }
    .cta-inner h2 {
    font-size:28px
  }
    .cta-inner .btn {
    padding:11px 16px
  }
    .product-subnav {
    top:64px
  }
    .subnav-inner {
    flex-wrap:wrap;
    gap:0;
    min-height:0;
    padding:7px 0 3px
  }
    .subnav-brand {
    font-size:14px;
    gap:8px;
    min-height:25px
  }
    .subnav-brand .product-icon {
    width:23px;
    height:23px;
    border-radius:5px
  }
    .subnav-brand svg {
    width:16px;
    height:16px
  }
    .subnav-links {
    width:100%;
    justify-content:space-between;
    gap:6px;
    font-size:14px
  }
    .subnav-links a {
    padding:9px 0;
    min-height:40px
  }
    .product-hero .demo-caption {
    text-align:left;
    font-size:13px;
    margin-top:15px
  }
    .capability-grid {
    gap:22px 20px
  }
    .capability-grid h3 {
    font-size:18px;
    margin:9px 0
  }
    .capability-grid p {
    font-size:14px;
    line-height:1.9
  }
    .case-selector {
    gap:8px
  }
    .case-selector .btn {
    font-size:14px;
    padding:9px 14px
  }
    .case-panel {
    padding:18px
  }
    .case-profile {
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
    padding-bottom:16px
  }
    .case-step>summary {
    font-size:16px;
    gap:10px;
    padding:17px 0
  }
    .case-facts,.review-pair {
    grid-template-columns:1fr;
    gap:15px
  }
    .source-excerpt,.target-question {
    padding:13px 14px
  }
    .case-reason {
    font-size:14px
  }
    .source-detail {
    padding:10px 12px
  }
    blockquote {
    font-size:14px;
    line-height:1.9
  }
    .review-pair p {
    font-size:14px;
    padding:14px
  }
    .decision-note {
    padding:14px
  }
    .decision-note p {
    font-size:14px
  }
    .simple-hero {
    padding:38px 0 25px
  }
    .simple-hero h1 {
    font-size:31px;
    line-height:1.5;
    letter-spacing:-.6px
  }
    .simple-hero p {
    font-size:15px
  }
    .pricing-grid,.purchase-checks {
    grid-template-columns:1fr;
    gap:22px
  }
    .price-card {
    padding:24px
  }
    .price-card h2 {
    font-size:26px
  }
    .faq-wrap>h2 {
    font-size:26px;
    text-align:left
  }
    .faq summary {
    font-size:15px
  }
    .faq p {
    font-size:14px
  }
    .help-chapter {
    padding:32px 0
  }
    .help-chapter h2 {
    font-size:25px
  }
    .guide-index {
    gap:8px
  }
    .guide-index a {
    font-size:14px;
    padding:8px 12px
  }
    .about-products,.principle-grid {
    grid-template-columns:1fr;
    gap:24px
  }
    .about-layout>div>p {
    font-size:15px
  }
    .about-products h3 {
    font-size:20px
  }
    .site-footer {
    padding:32px 0 22px
  }
    .footer-top {
    display:block;
    margin-bottom:24px
  }
    .footer-links {
    margin-top:24px;
    gap:45px;
    font-size:14px
  }
    .footer-brand p {
    font-size:14px
  }
    .footer-bottom {
    display:block;
    font-size:13px
  }
    .footer-bottom span {
    display:block
  }
    .dialog-content {
    padding:28px 22px
  }
    .dialog-content h2 {
    font-size:23px
  }
    .form-field input,.form-field select,.form-field textarea {
    font-size:16px
  }
    .form-field textarea {
    height:135px
  }
    .demo-dialog {
    width:calc(100% - 20px);
    height:calc(100dvh - 24px);
    max-height:calc(100dvh - 24px)
  }
    .demo-header {
    padding:22px 18px 14px
  }
    .demo-header h2 {
    font-size:23px
  }
    .demo-header .dialog-eyebrow {
    font-size:13px;
    letter-spacing:0
  }
    .demo-scroll {
    padding:16px 18px
  }
    .demo-controls {
    padding:12px;
    gap:8px
  }
    .demo-controls>.button-row {
    gap:8px
  }
    .demo-controls .btn {
    font-size:14px;
    padding:9px 13px
  }
    .demo-step-label {
    font-size:13px
  }
    .demo-dialog .screen-task {
    grid-template-columns:16px minmax(0,1fr)
  }
    .demo-disclosure {
    font-size:13px
  }
    .choice-card {
    padding:15px;
    gap:12px
  }
    .choice-card strong {
    font-size:15px
  }
    .choice-card small {
    font-size:14px
  }
}
@media(max-width:359px) {
    .container {
    width:calc(100% - 32px)
  }
    .hero h1 {
    font-size:30px
  }
    .hero .btn-lg {
    padding-inline:14px
  }
    .capability-grid {
    grid-template-columns:1fr
  }
    .quick-products {
    gap:8px
  }
    .quick-products span {
    font-size:13px
  }
    .case-panel {
    padding:14px
  }
    .screen-content {
    padding:14px 12px
  }
    .screen-tabs {
    gap:16px
  }
    .screen-heading>strong {
    font-size:16px
  }
    .dialog-content {
    padding-inline:18px
  }
    .demo-header h2 {
    font-size:21px
  }
    .demo-header .dialog-description {
    font-size:13px
  }
    .demo-controls .btn {
    padding-inline:11px
  }
    .demo-step-label {
    max-width:54px;
    font-size:12px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important
  }
}