/* EkaAgents — Eka Doc build.
   [1] Eka Care's generated page sheet, so the classes inside the embeds
       resolve here and override Eka Doc's same-named ones (page scope).
   [2] the page's own stylesheet.
   [3] aliases for the 12 classes Webflow renamed on paste.
   Built by ekadoc.py — do not hand-edit. */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: sans-serif;
}

body {
  margin: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

audio, canvas, progress, video {
  vertical-align: baseline;
  display: inline-block;
}

audio:not([controls]) {
  height: 0;
  display: none;
}

[hidden], template {
  display: none;
}

a {
  background-color: #0000;
}

a:active, a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  margin: .67em 0;
  font-size: 2em;
}

mark {
  color: #000;
  background: #ff0;
}

small {
  font-size: 80%;
}

sub, sup {
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -.5em;
}

sub {
  bottom: -.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code, kbd, pre, samp {
  font-family: monospace;
  font-size: 1em;
}

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html input[type="button"], input[type="reset"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}

@font-face {
  font-family: webflow-icons;
  src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format("truetype");
  font-weight: normal;
  font-style: normal;
}

[class^="w-icon-"], [class*=" w-icon-"] {
  speak: none;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-family: webflow-icons !important;
}

.w-icon-slider-right:before {
  content: "";
}

.w-icon-slider-left:before {
  content: "";
}

.w-icon-nav-menu:before {
  content: "";
}

.w-icon-arrow-down:before, .w-icon-dropdown-toggle:before {
  content: "";
}

.w-icon-file-upload-remove:before {
  content: "";
}

.w-icon-file-upload-icon:before {
  content: "";
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  color: #333;
  background-color: #fff;
  min-height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
}

html.w-mod-touch * {
  background-attachment: scroll !important;
}

.w-block {
  display: block;
}

.w-inline-block {
  max-width: 100%;
  display: inline-block;
}

.w-clearfix:before, .w-clearfix:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-clearfix:after {
  clear: both;
}

.w-hidden {
  display: none;
}

.w-button {
  color: #fff;
  line-height: inherit;
  cursor: pointer;
  background-color: #3898ec;
  border: 0;
  border-radius: 0;
  padding: 9px 15px;
  text-decoration: none;
  display: inline-block;
}

input.w-button {
  -webkit-appearance: button;
}

:where(button.w-popover-trigger) {
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
  background-color: #0000;
  border: 0;
  margin: 0;
  padding: 0;
}

.w-popover {
  position-anchor: none;
}

.w-popover[popover]:not(:popover-open) {
  display: none;
}

html[data-w-dynpage] [data-w-cloak] {
  color: #0000 !important;
}

.w-code-block {
  margin: unset;
}

pre.w-code-block code {
  all: inherit;
}

pre.w-code-block code > span {
  display: block !important;
}

.w-optimization {
  display: contents;
}

.w-webflow-badge, .w-webflow-badge > img {
  box-sizing: unset;
  width: unset;
  height: unset;
  max-height: unset;
  max-width: unset;
  min-height: unset;
  min-width: unset;
  margin: unset;
  padding: unset;
  float: unset;
  clear: unset;
  border: unset;
  border-radius: unset;
  background: unset;
  background-image: unset;
  background-position: unset;
  background-size: unset;
  background-repeat: unset;
  background-origin: unset;
  background-clip: unset;
  background-attachment: unset;
  background-color: unset;
  box-shadow: unset;
  transform: unset;
  direction: unset;
  font-family: unset;
  font-weight: unset;
  color: unset;
  font-size: unset;
  line-height: unset;
  font-style: unset;
  font-variant: unset;
  text-align: unset;
  letter-spacing: unset;
  -webkit-text-decoration: unset;
  text-decoration: unset;
  text-indent: unset;
  text-transform: unset;
  list-style-type: unset;
  text-shadow: unset;
  vertical-align: unset;
  cursor: unset;
  white-space: unset;
  word-break: unset;
  word-spacing: unset;
  word-wrap: unset;
  transition: unset;
}

.w-webflow-badge {
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 0 1px #0000001a, 0 1px 3px #0000001a;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2147483647 !important;
  color: #aaadb0 !important;
  width: auto !important;
  height: auto !important;
  overflow: unset !important;
  background-color: #fff !important;
  border-radius: 3px !important;
  margin: 0 !important;
  padding: 6px !important;
  font-size: 12px !important;
  line-height: 14px !important;
  text-decoration: none !important;
  display: inline-block !important;
  position: fixed !important;
  inset: auto 12px 12px auto !important;
  transform: none !important;
}

.w-webflow-badge > img {
  position: unset;
  visibility: unset !important;
  opacity: 1 !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 10px;
  font-weight: bold;
}

h1 {
  margin-top: 20px;
  font-size: 38px;
  line-height: 44px;
}

h2 {
  margin-top: 20px;
  font-size: 32px;
  line-height: 36px;
}

h3 {
  margin-top: 20px;
  font-size: 24px;
  line-height: 30px;
}

h4 {
  margin-top: 10px;
  font-size: 18px;
  line-height: 24px;
}

h5 {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
}

h6 {
  margin-top: 10px;
  font-size: 12px;
  line-height: 18px;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

blockquote {
  border-left: 5px solid #e2e2e2;
  margin: 0 0 10px;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 22px;
}

figure {
  margin: 0 0 10px;
}

figcaption {
  text-align: center;
  margin-top: 5px;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

.w-list-unstyled {
  padding-left: 0;
  list-style: none;
}

.w-embed:before, .w-embed:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-embed:after {
  clear: both;
}

.w-video {
  width: 100%;
  padding: 0;
  position: relative;
}

.w-video iframe, .w-video object, .w-video embed {
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

button, [type="button"], [type="reset"] {
  cursor: pointer;
  -webkit-appearance: button;
  border: 0;
}

.w-form {
  margin: 0 0 15px;
}

.w-form-done {
  text-align: center;
  background-color: #ddd;
  padding: 20px;
  display: none;
}

.w-form-fail {
  background-color: #ffdede;
  margin-top: 10px;
  padding: 10px;
  display: none;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
  display: block;
}

.w-input, .w-select {
  color: #333;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #ccc;
  width: 100%;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857;
  display: block;
}

.w-input::placeholder, .w-select::placeholder {
  color: #999;
}

.w-input:focus, .w-select:focus {
  border-color: #3898ec;
  outline: 0;
}

.w-input[disabled], .w-select[disabled], .w-input[readonly], .w-select[readonly], fieldset[disabled] .w-input, fieldset[disabled] .w-select {
  cursor: not-allowed;
}

.w-input[disabled]:not(.w-input-disabled), .w-select[disabled]:not(.w-input-disabled), .w-input[readonly], .w-select[readonly], fieldset[disabled]:not(.w-input-disabled) .w-input, fieldset[disabled]:not(.w-input-disabled) .w-select {
  background-color: #eee;
}

textarea.w-input, textarea.w-select {
  height: auto;
}

.w-select {
  background-color: #f3f3f3;
}

.w-select[multiple] {
  height: auto;
}

.w-form-label {
  cursor: pointer;
  margin-bottom: 0;
  font-weight: normal;
  display: inline-block;
}

.w-radio {
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}

.w-radio:before, .w-radio:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-radio:after {
  clear: both;
}

.w-radio-input {
  float: left;
  margin: 3px 0 0 -20px;
  line-height: normal;
}

.w-file-upload {
  margin-bottom: 10px;
  display: block;
}

.w-file-upload-input {
  opacity: 0;
  z-index: -100;
  width: .1px;
  height: .1px;
  position: absolute;
  overflow: hidden;
}

.w-file-upload-default, .w-file-upload-uploading, .w-file-upload-success {
  color: #333;
  display: inline-block;
}

.w-file-upload-error {
  margin-top: 10px;
  display: block;
}

.w-file-upload-default.w-hidden, .w-file-upload-uploading.w-hidden, .w-file-upload-error.w-hidden, .w-file-upload-success.w-hidden {
  display: none;
}

.w-file-upload-uploading-btn {
  cursor: pointer;
  background-color: #fafafa;
  border: 1px solid #ccc;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: normal;
  display: flex;
}

.w-file-upload-file {
  background-color: #fafafa;
  border: 1px solid #ccc;
  flex-grow: 1;
  justify-content: space-between;
  margin: 0;
  padding: 8px 9px 8px 11px;
  display: flex;
}

.w-file-upload-file-name {
  font-size: 14px;
  font-weight: normal;
  display: block;
}

.w-file-remove-link {
  cursor: pointer;
  width: auto;
  height: auto;
  margin-top: 3px;
  margin-left: 10px;
  padding: 3px;
  display: block;
}

.w-icon-file-upload-remove {
  margin: auto;
  font-size: 10px;
}

.w-file-upload-error-msg {
  color: #ea384c;
  padding: 2px 0;
  display: inline-block;
}

.w-file-upload-info {
  padding: 0 12px;
  line-height: 38px;
  display: inline-block;
}

.w-file-upload-label {
  cursor: pointer;
  background-color: #fafafa;
  border: 1px solid #ccc;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: normal;
  display: inline-block;
}

.w-icon-file-upload-icon, .w-icon-file-upload-uploading {
  width: 20px;
  margin-right: 8px;
  display: inline-block;
}

.w-icon-file-upload-uploading {
  height: 20px;
}

.w-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.w-container:before, .w-container:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-container:after {
  clear: both;
}

.w-container .w-row {
  margin-left: -10px;
  margin-right: -10px;
}

.w-row:before, .w-row:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-row:after {
  clear: both;
}

.w-row .w-row {
  margin-left: 0;
  margin-right: 0;
}

.w-col {
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
}

.w-col .w-col {
  padding-left: 0;
  padding-right: 0;
}

.w-col-1 {
  width: 8.33333%;
}

.w-col-2 {
  width: 16.6667%;
}

.w-col-3 {
  width: 25%;
}

.w-col-4 {
  width: 33.3333%;
}

.w-col-5 {
  width: 41.6667%;
}

.w-col-6 {
  width: 50%;
}

.w-col-7 {
  width: 58.3333%;
}

.w-col-8 {
  width: 66.6667%;
}

.w-col-9 {
  width: 75%;
}

.w-col-10 {
  width: 83.3333%;
}

.w-col-11 {
  width: 91.6667%;
}

.w-col-12 {
  width: 100%;
}

.w-hidden-main {
  display: none !important;
}

@media screen and (max-width: 991px) {
  .w-container {
    max-width: 728px;
  }

  .w-hidden-main {
    display: inherit !important;
  }

  .w-hidden-medium {
    display: none !important;
  }

  .w-col-medium-1 {
    width: 8.33333%;
  }

  .w-col-medium-2 {
    width: 16.6667%;
  }

  .w-col-medium-3 {
    width: 25%;
  }

  .w-col-medium-4 {
    width: 33.3333%;
  }

  .w-col-medium-5 {
    width: 41.6667%;
  }

  .w-col-medium-6 {
    width: 50%;
  }

  .w-col-medium-7 {
    width: 58.3333%;
  }

  .w-col-medium-8 {
    width: 66.6667%;
  }

  .w-col-medium-9 {
    width: 75%;
  }

  .w-col-medium-10 {
    width: 83.3333%;
  }

  .w-col-medium-11 {
    width: 91.6667%;
  }

  .w-col-medium-12 {
    width: 100%;
  }

  .w-col-stack {
    width: 100%;
    left: auto;
    right: auto;
  }
}

@media screen and (max-width: 767px) {
  .w-hidden-main, .w-hidden-medium {
    display: inherit !important;
  }

  .w-hidden-small {
    display: none !important;
  }

  .w-row, .w-container .w-row {
    margin-left: 0;
    margin-right: 0;
  }

  .w-col {
    width: 100%;
    left: auto;
    right: auto;
  }

  .w-col-small-1 {
    width: 8.33333%;
  }

  .w-col-small-2 {
    width: 16.6667%;
  }

  .w-col-small-3 {
    width: 25%;
  }

  .w-col-small-4 {
    width: 33.3333%;
  }

  .w-col-small-5 {
    width: 41.6667%;
  }

  .w-col-small-6 {
    width: 50%;
  }

  .w-col-small-7 {
    width: 58.3333%;
  }

  .w-col-small-8 {
    width: 66.6667%;
  }

  .w-col-small-9 {
    width: 75%;
  }

  .w-col-small-10 {
    width: 83.3333%;
  }

  .w-col-small-11 {
    width: 91.6667%;
  }

  .w-col-small-12 {
    width: 100%;
  }
}

@media screen and (max-width: 479px) {
  .w-container {
    max-width: none;
  }

  .w-hidden-main, .w-hidden-medium, .w-hidden-small {
    display: inherit !important;
  }

  .w-hidden-tiny {
    display: none !important;
  }

  .w-col {
    width: 100%;
  }

  .w-col-tiny-1 {
    width: 8.33333%;
  }

  .w-col-tiny-2 {
    width: 16.6667%;
  }

  .w-col-tiny-3 {
    width: 25%;
  }

  .w-col-tiny-4 {
    width: 33.3333%;
  }

  .w-col-tiny-5 {
    width: 41.6667%;
  }

  .w-col-tiny-6 {
    width: 50%;
  }

  .w-col-tiny-7 {
    width: 58.3333%;
  }

  .w-col-tiny-8 {
    width: 66.6667%;
  }

  .w-col-tiny-9 {
    width: 75%;
  }

  .w-col-tiny-10 {
    width: 83.3333%;
  }

  .w-col-tiny-11 {
    width: 91.6667%;
  }

  .w-col-tiny-12 {
    width: 100%;
  }
}

.w-widget {
  position: relative;
}

.w-widget-map {
  width: 100%;
  height: 400px;
}

.w-widget-map label {
  width: auto;
  display: inline;
}

.w-widget-map img {
  max-width: inherit;
}

.w-widget-map .gm-style-iw {
  text-align: center;
}

.w-widget-map .gm-style-iw > button {
  display: none !important;
}

.w-widget-twitter {
  overflow: hidden;
}

.w-widget-twitter-count-shim {
  vertical-align: top;
  text-align: center;
  background: #fff;
  border: 1px solid #758696;
  border-radius: 3px;
  width: 28px;
  height: 20px;
  display: inline-block;
  position: relative;
}

.w-widget-twitter-count-shim * {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.w-widget-twitter-count-shim .w-widget-twitter-count-inner {
  text-align: center;
  color: #999;
  font-family: serif;
  font-size: 15px;
  line-height: 12px;
  position: relative;
}

.w-widget-twitter-count-shim .w-widget-twitter-count-clear {
  display: block;
  position: relative;
}

.w-widget-twitter-count-shim.w--large {
  width: 36px;
  height: 28px;
}

.w-widget-twitter-count-shim.w--large .w-widget-twitter-count-inner {
  font-size: 18px;
  line-height: 18px;
}

.w-widget-twitter-count-shim:not(.w--vertical) {
  margin-left: 5px;
  margin-right: 8px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large {
  margin-left: 6px;
}

.w-widget-twitter-count-shim:not(.w--vertical):before, .w-widget-twitter-count-shim:not(.w--vertical):after {
  content: " ";
  pointer-events: none;
  border: solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  left: 0;
}

.w-widget-twitter-count-shim:not(.w--vertical):before {
  border-width: 4px;
  border-color: #75869600 #5d6c7b #75869600 #75869600;
  margin-top: -4px;
  margin-left: -9px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large:before {
  border-width: 5px;
  margin-top: -5px;
  margin-left: -10px;
}

.w-widget-twitter-count-shim:not(.w--vertical):after {
  border-width: 4px;
  border-color: #fff0 #fff #fff0 #fff0;
  margin-top: -4px;
  margin-left: -8px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large:after {
  border-width: 5px;
  margin-top: -5px;
  margin-left: -9px;
}

.w-widget-twitter-count-shim.w--vertical {
  width: 61px;
  height: 33px;
  margin-bottom: 8px;
}

.w-widget-twitter-count-shim.w--vertical:before, .w-widget-twitter-count-shim.w--vertical:after {
  content: " ";
  pointer-events: none;
  border: solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  top: 100%;
  left: 50%;
}

.w-widget-twitter-count-shim.w--vertical:before {
  border-width: 5px;
  border-color: #5d6c7b #75869600 #75869600;
  margin-left: -5px;
}

.w-widget-twitter-count-shim.w--vertical:after {
  border-width: 4px;
  border-color: #fff #fff0 #fff0;
  margin-left: -4px;
}

.w-widget-twitter-count-shim.w--vertical .w-widget-twitter-count-inner {
  font-size: 18px;
  line-height: 22px;
}

.w-widget-twitter-count-shim.w--vertical.w--large {
  width: 76px;
}

.w-background-video {
  color: #fff;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.w-background-video > video {
  object-fit: cover;
  z-index: -100;
  background-position: 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  inset: -100%;
}

.w-background-video > video::-webkit-media-controls-start-playback-button {
  -webkit-appearance: none;
  display: none !important;
}

.w-background-video--control {
  background-color: #0000;
  padding: 0;
  position: absolute;
  bottom: 1em;
  right: 1em;
}

.w-background-video--control > [hidden] {
  display: none !important;
}

.w-slider {
  text-align: center;
  clear: both;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  background: #ddd;
  height: 300px;
  position: relative;
}

.w-slider-mask {
  z-index: 1;
  white-space: nowrap;
  height: 100%;
  display: block;
  position: relative;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-slide {
  vertical-align: top;
  white-space: normal;
  text-align: left;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
}

.w-slider-nav {
  z-index: 2;
  text-align: center;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  height: 40px;
  margin: auto;
  padding-top: 10px;
  position: absolute;
  inset: auto 0 0;
}

.w-slider-nav.w-round > div {
  border-radius: 100%;
}

.w-slider-nav.w-num > div {
  width: auto;
  height: auto;
  font-size: inherit;
  line-height: inherit;
  padding: .2em .5em;
}

.w-slider-nav.w-shadow > div {
  box-shadow: 0 0 3px #3336;
}

.w-slider-nav-invert {
  color: #fff;
}

.w-slider-nav-invert > div {
  background-color: #2226;
}

.w-slider-nav-invert > div.w-active {
  background-color: #222;
}

.w-slider-dot {
  cursor: pointer;
  background-color: #fff6;
  width: 1em;
  height: 1em;
  margin: 0 3px .5em;
  transition: background-color .1s, color .1s;
  display: inline-block;
  position: relative;
}

.w-slider-dot.w-active {
  background-color: #fff;
}

.w-slider-dot:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff;
}

.w-slider-dot:focus.w-active {
  box-shadow: none;
}

.w-slider-arrow-left, .w-slider-arrow-right {
  cursor: pointer;
  color: #fff;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  width: 80px;
  margin: auto;
  font-size: 40px;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.w-slider-arrow-left [class^="w-icon-"], .w-slider-arrow-right [class^="w-icon-"], .w-slider-arrow-left [class*=" w-icon-"], .w-slider-arrow-right [class*=" w-icon-"] {
  position: absolute;
}

.w-slider-arrow-left:focus, .w-slider-arrow-right:focus {
  outline: 0;
}

.w-slider-arrow-left {
  z-index: 3;
  right: auto;
}

.w-slider-arrow-right {
  z-index: 4;
  left: auto;
}

.w-icon-slider-left, .w-icon-slider-right {
  width: 1em;
  height: 1em;
  margin: auto;
  inset: 0;
}

.w-slider-aria-label {
  clip: rect(0 0 0 0);
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.w-slider-force-show {
  display: block !important;
}

.w-dropdown {
  text-align: left;
  z-index: 900;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  position: relative;
}

.w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link {
  vertical-align: top;
  color: #222;
  text-align: left;
  white-space: nowrap;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  position: relative;
}

.w-dropdown-toggle {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  padding-right: 40px;
  display: inline-block;
}

.w-dropdown-toggle:focus {
  outline: 0;
}

.w-icon-dropdown-toggle {
  width: 1em;
  height: 1em;
  margin: auto 20px auto auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.w-dropdown-list {
  background: #ddd;
  min-width: 100%;
  display: none;
  position: absolute;
}

.w-dropdown-list.w--open {
  display: block;
}

.w-dropdown-link {
  color: #222;
  padding: 10px 20px;
  display: block;
}

.w-dropdown-link.w--current {
  color: #0082f3;
}

.w-dropdown-link:focus {
  outline: 0;
}

.w-lightbox-backdrop {
  cursor: auto;
  letter-spacing: normal;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  visibility: visible;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  color: #fff;
  text-align: center;
  z-index: 2000;
  opacity: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: #000000e6;
  outline: 0;
  font-family: Helvetica Neue, Helvetica, Ubuntu, Segoe UI, Verdana, sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 300;
  line-height: 1.2;
  list-style: disc;
  position: fixed;
  inset: 0;
  -webkit-transform: translate(0);
}

.w-lightbox-backdrop, .w-lightbox-container {
  -webkit-overflow-scrolling: touch;
  height: 100%;
  overflow: auto;
}

.w-lightbox-content {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.w-lightbox-view {
  opacity: 0;
  width: 100vw;
  height: 100vh;
  position: absolute;
}

.w-lightbox-view:before {
  content: "";
  height: 100vh;
}

.w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
  height: 86vh;
}

.w-lightbox-frame, .w-lightbox-view:before {
  vertical-align: middle;
  display: inline-block;
}

.w-lightbox-figure {
  margin: 0;
  position: relative;
}

.w-lightbox-group .w-lightbox-figure {
  cursor: pointer;
}

.w-lightbox-img {
  width: auto;
  max-width: none;
  height: auto;
}

.w-lightbox-image {
  float: none;
  max-width: 100vw;
  max-height: 100vh;
  display: block;
}

.w-lightbox-group .w-lightbox-image {
  max-height: 86vh;
}

.w-lightbox-caption {
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #0006;
  padding: .5em 1em;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-lightbox-embed {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.w-lightbox-control {
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  width: 4em;
  transition: all .3s;
  position: absolute;
  top: 0;
}

.w-lightbox-left {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==");
  display: none;
  bottom: 0;
  left: 0;
}

.w-lightbox-right {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+");
  display: none;
  bottom: 0;
  right: 0;
}

.w-lightbox-close {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=");
  background-size: 18px;
  height: 2.6em;
  right: 0;
}

.w-lightbox-strip {
  white-space: nowrap;
  padding: 0 1vh;
  line-height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto hidden;
}

.w-lightbox-item {
  box-sizing: content-box;
  cursor: pointer;
  width: 10vh;
  padding: 2vh 1vh;
  display: inline-block;
  -webkit-transform: translate3d(0, 0, 0);
}

.w-lightbox-active {
  opacity: .3;
}

.w-lightbox-thumbnail {
  background: #222;
  height: 10vh;
  position: relative;
  overflow: hidden;
}

.w-lightbox-thumbnail-image {
  position: absolute;
  top: 0;
  left: 0;
}

.w-lightbox-thumbnail .w-lightbox-tall {
  width: 100%;
  top: 50%;
  transform: translate(0, -50%);
}

.w-lightbox-thumbnail .w-lightbox-wide {
  height: 100%;
  left: 50%;
  transform: translate(-50%);
}

.w-lightbox-spinner {
  box-sizing: border-box;
  border: 5px solid #0006;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  animation: .8s linear infinite spin;
  position: absolute;
  top: 50%;
  left: 50%;
}

.w-lightbox-spinner:after {
  content: "";
  border: 3px solid #0000;
  border-bottom-color: #fff;
  border-radius: 50%;
  position: absolute;
  inset: -4px;
}

.w-lightbox-hide {
  display: none;
}

.w-lightbox-noscroll {
  overflow: hidden;
}

@media (min-width: 768px) {
  .w-lightbox-content {
    height: 96vh;
    margin-top: 2vh;
  }

  .w-lightbox-view, .w-lightbox-view:before {
    height: 96vh;
  }

  .w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
    height: 84vh;
  }

  .w-lightbox-image {
    max-width: 96vw;
    max-height: 96vh;
  }

  .w-lightbox-group .w-lightbox-image {
    max-width: 82.3vw;
    max-height: 84vh;
  }

  .w-lightbox-left, .w-lightbox-right {
    opacity: .5;
    display: block;
  }

  .w-lightbox-close {
    opacity: .8;
  }

  .w-lightbox-control:hover {
    opacity: 1;
  }
}

.w-lightbox-inactive, .w-lightbox-inactive:hover {
  opacity: 0;
}

.w-richtext:before, .w-richtext:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-richtext:after {
  clear: both;
}

.w-richtext[contenteditable="true"]:before, .w-richtext[contenteditable="true"]:after {
  white-space: initial;
}

.w-richtext ol, .w-richtext ul {
  overflow: hidden;
}

.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after, .w-richtext .w-richtext-figure-selected[data-rt-type="video"] div:after, .w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div, .w-richtext .w-richtext-figure-selected[data-rt-type="image"] div {
  outline: 2px solid #2895f7;
}

.w-richtext figure.w-richtext-figure-type-video > div:after, .w-richtext figure[data-rt-type="video"] > div:after {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
}

.w-richtext figure {
  max-width: 60%;
  position: relative;
}

.w-richtext figure > div:before {
  cursor: default !important;
}

.w-richtext figure img {
  width: 100%;
}

.w-richtext figure figcaption.w-richtext-figcaption-placeholder {
  opacity: .6;
}

.w-richtext figure div {
  color: #0000;
  font-size: 0;
}

.w-richtext figure.w-richtext-figure-type-image, .w-richtext figure[data-rt-type="image"] {
  display: table;
}

.w-richtext figure.w-richtext-figure-type-image > div, .w-richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}

.w-richtext figure.w-richtext-figure-type-image > figcaption, .w-richtext figure[data-rt-type="image"] > figcaption {
  caption-side: bottom;
  display: table-caption;
}

.w-richtext figure.w-richtext-figure-type-video, .w-richtext figure[data-rt-type="video"] {
  width: 60%;
  height: 0;
}

.w-richtext figure.w-richtext-figure-type-video iframe, .w-richtext figure[data-rt-type="video"] iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.w-richtext figure.w-richtext-figure-type-video > div, .w-richtext figure[data-rt-type="video"] > div {
  width: 100%;
}

.w-richtext figure.w-richtext-align-center {
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image > div, .w-richtext figure.w-richtext-align-center[data-rt-type="image"] > div {
  max-width: 100%;
}

.w-richtext figure.w-richtext-align-normal {
  clear: both;
}

.w-richtext figure.w-richtext-align-fullwidth {
  text-align: center;
  clear: both;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-richtext figure.w-richtext-align-fullwidth > div {
  padding-bottom: inherit;
  display: inline-block;
}

.w-richtext figure.w-richtext-align-fullwidth > figcaption {
  display: block;
}

.w-richtext figure.w-richtext-align-floatleft {
  float: left;
  clear: none;
  margin-right: 15px;
}

.w-richtext figure.w-richtext-align-floatright {
  float: right;
  clear: none;
  margin-left: 15px;
}

.w-nav {
  z-index: 1000;
  background: #ddd;
  position: relative;
}

.w-nav:before, .w-nav:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-nav:after {
  clear: both;
}

.w-nav-brand {
  float: left;
  color: #333;
  text-decoration: none;
  position: relative;
}

.w-nav-link {
  vertical-align: top;
  color: #222;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.w-nav-link.w--current {
  color: #0082f3;
}

.w-nav-menu {
  float: right;
  position: relative;
}

[data-nav-menu-open] {
  text-align: center;
  background: #c8c8c8;
  min-width: 200px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: visible;
  display: block !important;
}

.w--nav-link-open {
  display: block;
  position: relative;
}

.w-nav-overlay {
  width: 100%;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-nav-overlay [data-nav-menu-open] {
  top: 0;
}

.w-nav[data-animation="over-left"] .w-nav-overlay {
  width: auto;
}

.w-nav[data-animation="over-left"] .w-nav-overlay, .w-nav[data-animation="over-left"] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  right: auto;
}

.w-nav[data-animation="over-right"] .w-nav-overlay {
  width: auto;
}

.w-nav[data-animation="over-right"] .w-nav-overlay, .w-nav[data-animation="over-right"] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  left: auto;
}

.w-nav-button {
  float: right;
  cursor: pointer;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  padding: 18px;
  font-size: 24px;
  display: none;
  position: relative;
}

.w-nav-button:focus {
  outline: 0;
}

.w-nav-button.w--open {
  color: #fff;
  background-color: #c8c8c8;
}

.w-nav[data-collapse="all"] .w-nav-menu {
  display: none;
}

.w-nav[data-collapse="all"] .w-nav-button, .w--nav-dropdown-open, .w--nav-dropdown-toggle-open {
  display: block;
}

.w--nav-dropdown-list-open {
  position: static;
}

@media screen and (max-width: 991px) {
  .w-nav[data-collapse="medium"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="medium"] .w-nav-button {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .w-nav[data-collapse="small"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="small"] .w-nav-button {
    display: block;
  }

  .w-nav-brand {
    padding-left: 10px;
  }
}

@media screen and (max-width: 479px) {
  .w-nav[data-collapse="tiny"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="tiny"] .w-nav-button {
    display: block;
  }
}

.w-tabs {
  position: relative;
}

.w-tabs:before, .w-tabs:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-tabs:after {
  clear: both;
}

.w-tab-menu {
  position: relative;
}

.w-tab-link {
  vertical-align: top;
  text-align: left;
  cursor: pointer;
  color: #222;
  background-color: #ddd;
  padding: 9px 30px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.w-tab-link.w--current {
  background-color: #c8c8c8;
}

.w-tab-link:focus {
  outline: 0;
}

.w-tab-content {
  display: block;
  position: relative;
  overflow: hidden;
}

.w-tab-pane {
  display: none;
  position: relative;
}

.w--tab-active {
  display: block;
}

@media screen and (max-width: 479px) {
  .w-tab-link {
    display: block;
  }
}

.w-ix-emptyfix:after {
  content: "";
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.w-dyn-empty {
  background-color: #ddd;
  padding: 10px;
}

.w-dyn-hide, .w-dyn-bind-empty, .w-condition-invisible {
  display: none !important;
}

.wf-layout-layout {
  display: grid;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

:root {
  --black: black;
  --white: white;
  --blue: #3b5bfa;
  --transparent: transparent;
  --royal-blue: #111b31;
  --grey: #9ea8b8;
  --sn-to: 38%;
  --wf-reg: 1;
  --sn-to-1: 80%;
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 38px;
  font-weight: 700;
  line-height: 44px;
}

h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 36px;
  display: inline-block;
}

h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}

h4 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

p {
  margin-bottom: 0;
}

a {
  text-decoration: none;
  transition: all .35s ease-in-out;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-form-formradioinput--inputType-custom {
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 12px;
  height: 12px;
}

.w-form-formradioinput--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-form-formradioinput--inputType-custom.w--redirected-checked {
  border-width: 4px;
  border-color: #3898ec;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

.body {
  background-color: var(--black);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.page-wrapper {
  overflow: clip;
}

.container {
  width: 100%;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
}

.button-primary {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  border: 1px solid var(--blue);
  background-color: var(--blue);
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  color: var(--white);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  padding: 12px 25px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  position: static;
  box-shadow: 0 0 16px #0003;
}

.button-primary:hover {
  background-image: linear-gradient(#0000001a, #0000001a);
}

.button-primary.mob-full.hero-explore-ghost {
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--white);
  background-color: #ffffff1a;
  border-color: #0000;
  transition-property: none;
}

.button-primary.mob-full.hero-explore-ghost:hover {
  background-color: #fff3;
  background-image: none;
}

.button-primary.mob-full.hero-app-only {
  display: none;
}

.button-arrow {
  justify-content: center;
  align-items: center;
  display: flex;
}

.global-css {
  display: none;
}

.button-secondary {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  border: 1px solid var(--blue);
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  color: var(--white);
  background-color: #ffffff1a;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  padding: 12px 25px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  box-shadow: 0 0 16px #0003;
}

.button-secondary:hover {
  background-image: linear-gradient(#0000001a, #0000001a);
}

.button-secondary.is-small {
  padding: 8px 12px;
}

.button-secondary.full-width {
  width: 100%;
}

.button-secondary.is-blue {
  color: var(--blue);
}

.header {
  z-index: 99;
  width: 100%;
  position: fixed;
  inset: 0% 0% auto;
}

.navbar {
  padding-top: 16px;
  padding-bottom: 16px;
}

.navbar-wrap {
  background-color: var(--transparent);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.header-logo {
  justify-content: center;
  align-items: center;
  display: flex;
}

.brand {
  color: var(--white);
  justify-content: center;
  align-items: center;
  padding-left: 0;
  display: flex;
}

.navbar-inner {
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px;
  display: flex;
}

.nav-link {
  color: var(--white);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 4px 16px;
  font-size: 14px;
  font-weight: 500;
  transition: all .3s ease-in-out;
  display: inline-flex;
}

.nav-link:hover {
  background-color: var(--blue);
}

.navigation {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: static;
}

.dropdown-arrow {
  justify-content: center;
  align-items: center;
  display: flex;
}

.dropdown {
  position: static;
}

.dropdown-list {
  background-color: var(--white);
  border-radius: 12px;
  min-width: 196px;
  padding: 24px;
  top: 116%;
}

.dropdown-list-inner {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1px 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.dropdown-divider {
  background-color: #0000001a;
  width: 1px;
  height: 100%;
}

.drodown-title {
  color: #a8a8a8;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-left: 8px;
  font-size: 12px;
  font-weight: 600;
}

.dropdown-link {
  color: var(--royal-blue);
  padding: 8px;
  font-size: 14px;
  font-weight: 600;
  display: block;
}

.dropdown-link:hover {
  color: var(--blue);
}

.page-blur-overlay {
  opacity: 0;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
  background-color: #0006;
  position: fixed;
  inset: 0%;
}

.footer {
  background-color: var(--royal-blue);
}

.footer-top-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  padding-top: 64px;
  padding-bottom: 64px;
  display: grid;
}

.footer-menu-title {
  color: var(--white);
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
}

.footer-menu-list {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}

.footer-menu-link {
  color: #ffffffe6;
  font-size: 14px;
}

.footer-menu-link:hover {
  color: var(--blue);
}

.footer-note {
  color: #ffffffb3;
  text-align: center;
  width: 100%;
  max-width: 480px;
  margin: 24px auto;
  font-size: 10px;
}

.footer-note-link {
  color: #ffffffb3;
  text-decoration: underline;
}

.footer-bottom-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  color: #ffffffb3;
  border-top: 1px solid #fff3;
  grid-template-rows: auto;
  grid-template-columns: 1fr auto 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  padding-top: 36px;
  padding-bottom: 36px;
  font-size: 12px;
  display: grid;
}

.legal-list {
  grid-column-gap: 12px;
  grid-row-gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.legal-link {
  color: #ffffffb3;
  white-space: nowrap;
}

.legal-link:hover {
  color: var(--blue);
}

.social-media-list {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.social-media-link {
  color: #ffffffe6;
}

.social-media-link:hover {
  color: var(--blue);
}

.social-media-icon {
  justify-content: center;
  align-items: center;
  display: flex;
}

.footer-info-grid {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 288px;
  grid-auto-columns: 1fr;
  display: grid;
}

.footer-left-box {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  background-color: #ffffff0d;
  border: 1px solid #fff3;
  border-radius: 12px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1px .65fr;
  grid-auto-columns: 1fr;
  padding: 24px;
  display: grid;
  box-shadow: 0 0 32px #2970ff33;
}

.footer-divider {
  background-color: #fff3;
  width: 1px;
  height: 100%;
}

.footer-info-column {
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}

.footer-logo {
  justify-content: center;
  align-items: center;
  width: 250px;
  display: flex;
}

.footer-brand {
  padding-left: 0;
}

.footer-summary {
  color: #ffffffb3;
  margin-top: 8px;
  font-size: 12px;
}

.footer-button-wrap {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.footer-button {
  grid-column-gap: 7px;
  grid-row-gap: 7px;
  background-color: var(--royal-blue);
  color: var(--white);
  border: 1px solid #a6a6a6;
  border-radius: 6px;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 10px;
  font-size: 10px;
  display: flex;
}

.footer-button.is-black {
  background-color: var(--black);
  background-color: var(--black);
}

.footer-button-name {
  justify-content: center;
  align-items: center;
  display: flex;
}

.footer-button-text {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  display: flex;
}

.footer-right-box {
  background-image: url("https://cdn.prod.website-files.com/69aa8f05c1aa540cd7c00500/69ab2a3122e6ea3c6003c30a_Frame%202147223314.webp");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid #fff3;
  border-radius: 12px;
  flex-flow: column;
  justify-content: space-between;
  padding: 24px;
  display: flex;
  overflow: hidden;
}

.paragraph-xl {
  color: var(--white);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.paragraph-xl.text-grey {
  color: #4b596d;
  font-weight: 400;
}

.footer-right-button-wrap {
  text-align: center;
}

.button-note {
  color: #fffc;
  margin-top: 5px;
  font-size: 12px;
}

.header-button-mobile {
  display: none;
}

.tablet-navbar {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: none;
}

.menu-close-button {
  cursor: pointer;
}

.brand-white {
  color: var(--white);
  justify-content: center;
  align-items: center;
  padding-left: 0;
  display: flex;
}

.popup-model {
  z-index: 100;
  background-color: var(--royal-blue);
  border: 1px solid #ffffff1a;
  border-radius: 12px;
  width: 285px;
  display: none;
  position: fixed;
  inset: auto 24px 24px auto;
}

.popup-model-image-box {
  position: relative;
}

.popup-model-content-box {
  text-align: center;
  padding: 16px;
}

.popup-model-image {
  object-fit: cover;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.popup-model-close {
  background-color: var(--royal-blue);
  cursor: pointer;
  border-radius: 4px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  display: flex;
  position: absolute;
  inset: 8px 8px auto auto;
}

.popup-model-close-icon {
  justify-content: center;
  align-items: center;
  display: flex;
}

.model-title {
  color: var(--white);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.model-summary {
  color: #fff9;
  margin-top: 4px;
  margin-bottom: 12px;
  font-size: 12px;
}

.get-in-touch-popup {
  z-index: 105;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background-color: #0006;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: none;
  position: fixed;
  inset: 0%;
}

.get-in-touch-popup-box {
  z-index: 5;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  background-color: var(--white);
  border-radius: 24px;
  grid-template-rows: auto;
  grid-template-columns: 1fr .9fr;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: 85%;
  padding: 24px;
  display: grid;
  position: relative;
}

.get-in-touch-popup-left {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}

.get-in-touch-popup-image {
  object-fit: cover;
  border-radius: 12px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.get-in-touch-popup-top {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.get-in-touch-popup-content {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  flex-flow: column;
  display: flex;
}

.get-in-touch-popup-logo {
  width: 35px;
}

.heading-4xl {
  color: #282828;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
}

.get-in-touch-popup-bottom {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.get-in-touch-form-block {
  margin-bottom: 0;
}

.get-in-touch-form {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}

.radio-button-field {
  background-color: var(--white);
  cursor: pointer;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0;
  padding: 16px 18px;
  transition: all .35s ease-in-out;
  display: flex;
}

.radio-button {
  cursor: pointer;
  border: 1px solid #9ea8b8;
  flex: none;
  order: 9999;
  width: 22px;
  height: 22px;
  margin-top: 0;
  margin-left: auto;
}

.radio-button.w--redirected-checked {
  border: 1px none var(--transparent);
  background-image: url("https://cdn.prod.website-files.com/69aa8f05c1aa540cd7c00500/69b24ba6f16bb4d255bd0e2d_Icon%20(16).svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 22px 22px;
}

.radio-button.w--redirected-focus {
  box-shadow: 0 0 #0000;
}

.radio-button-icon {
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  display: flex;
}

.radion-button-label {
  color: var(--royal-blue);
  font-size: 18px;
  font-weight: 500;
}

.radio-button-css {
  display: none;
}

.get-in-touch-overlay {
  cursor: pointer;
  position: absolute;
  inset: 0%;
}

.badge-embed {
  display: inline;
}

.badge-embed:before, .badge-embed:after {
  display: none;
}

@media screen and (min-width: 1280px) {
  .body {
    font-size: 15px;
  }

  .section-summary {
    max-width: 480px;
  }

  .cta-badge {
    font-size: 12px;
  }

  .cta-badge-icon {
    width: 16px;
  }

  .cta-left-image, .cta-right-image {
    width: 280px;
  }

  .testimonial-left-arrow {
    left: 17%;
  }

  .testimonial-right-arrow {
    right: 17%;
  }

  .capabilities-inner {
    grid-column-gap: 64px;
    grid-row-gap: 64px;
  }

  .capabilities-content-wrap.is-1 {
    width: 320px;
  }

  .capabilities-content-wrap.is-2 {
    flex: 1;
    margin-bottom: 24px;
  }

  .capabilities-list-item {
    font-size: 14px;
  }

  .capabilities-image-1 {
    width: 320px;
  }

  .capabilities-summary {
    font-size: 14px;
  }

  .capabilities-left-gradient {
    width: 700px;
    top: 5%;
  }

  .capabilities-right-gradient {
    width: 750px;
    top: 5%;
  }

  .support-inner {
    max-width: 85%;
  }

  .support-content-item {
    font-size: 24px;
  }

  .video-tab-link {
    font-size: 14px;
  }

  .nav-link {
    font-size: 16px;
  }

  .footer-top-wrap {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .footer-menu-link {
    font-size: 16px;
  }

  .footer-left-box {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    padding: 32px;
  }

  .footer-logo {
    width: 300px;
  }

  .footer-summary {
    font-size: 14px;
  }

  .footer-right-box {
    padding: 32px;
  }

  .paragraph-xl {
    font-size: 20px;
  }

  .heading-2xl {
    font-size: 22px;
  }

  .video-tab-link-inner {
    font-size: 14px;
  }

  .blog-item-box {
    padding: 16px;
  }

  .blog-image-box {
    height: 220px;
  }

  .get-in-touch-popup-box {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    padding: 32px;
  }

  .heading-4xl {
    font-size: 32px;
  }

  .radion-button-label {
    font-size: 20px;
  }
}

@media screen and (min-width: 1440px) {
  .body {
    font-size: 16px;
  }

  .container {
    max-width: 1280px;
  }

  .section-content-wrap {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .heading-6xl {
    font-size: 60px;
  }

  .section-sub-title {
    font-size: 36px;
  }

  .cta-badge {
    font-size: 14px;
  }

  .cta-inner-bg {
    grid-column-gap: 96px;
    grid-row-gap: 96px;
  }

  .cta-left-image, .cta-right-image {
    width: 350px;
  }

  .integration-inner {
    grid-column-gap: 64px;
    grid-row-gap: 64px;
  }

  .integration-box {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }

  .integration-content-wrap {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .certificate-list {
    max-width: 800px;
  }

  .statistics-number {
    font-size: 65px;
  }

  .testimonial-slide {
    grid-column-gap: 96px;
    grid-row-gap: 96px;
  }

  .testimonial-info-title {
    font-size: 24px;
  }

  .testimonial-summary {
    font-size: 20px;
  }

  .capabilities-grid {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .capabilities-content-wrap.is-6 {
    width: 450px;
  }

  .capabilities-image-1 {
    width: 340px;
    right: 30px;
  }

  .capabilities-image-6 {
    width: 1050px;
  }

  .tab-video-wrap {
    width: 100%;
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
  }

  .video-tab-link {
    font-size: 13px;
  }

  .footer-menu-title {
    font-size: 18px;
  }

  .footer-left-box {
    grid-column-gap: 64px;
    grid-row-gap: 64px;
    grid-template-columns: 305px 1px 1fr;
  }

  .platform-project-list {
    top: 53%;
  }

  .project-item {
    width: 460px;
  }

  .typedjs-multiple {
    font-size: 60px;
  }

  .model-title {
    font-size: 20px;
  }

  .model-summary {
    font-size: 14px;
  }

  .get-in-touch-popup-box {
    grid-template-columns: 1fr 450px;
    max-width: 1065px;
  }

  .get-in-touch-popup-left {
    grid-column-gap: 72px;
    grid-row-gap: 72px;
  }

  .heading-4xl {
    font-size: 36px;
  }
}

@media screen and (min-width: 1920px) {
  .capabilities-left-gradient {
    width: 1200px;
    top: -18%;
  }

  .capabilities-right-gradient {
    width: 1100px;
    top: -15%;
  }

  .platform-project-list {
    top: 52%;
  }

  .project-item {
    width: 550px;
  }

  .heading-2xl {
    font-size: 24px;
  }
}

@media screen and (max-width: 991px) {
  .cta-section {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .container {
    max-width: 95%;
  }

  .section-content-wrap {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
  }

  .heading-6xl {
    font-size: 44px;
  }

  .section-sub-title {
    font-size: 28px;
  }

  .section-summary {
    max-width: 500px;
  }

  .button-primary.mob-full.hero-app-only {
    display: inline-flex;
  }

  .cta-inner-bg {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    padding-top: 50px;
  }

  .cta-left-image, .cta-right-image {
    width: 180px;
    display: none;
  }

  .integration-section {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .integration-box {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .integration-content-wrap {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
  }

  .integration-marquee-wrap {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .integration-marquee-item {
    margin-left: 6px;
    margin-right: 6px;
  }

  .certificate-list {
    max-width: 100%;
  }

  .certificate-logo {
    height: 100px;
  }

  .statistics-section {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .statistics-icon-box {
    width: 50px;
    height: 50px;
  }

  .statistics-text {
    margin-top: 4px;
    font-size: 12px;
  }

  .statistics-number {
    font-size: 48px;
  }

  .testimonial-section {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .testimonial-slider-wrap {
    margin-top: 50px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .testimonial-slide {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    padding: 20px;
  }

  .testimonial-summary {
    font-size: 16px;
  }

  .testimonial-author-name {
    font-size: 14px;
  }

  .testimonial-author-role {
    font-size: 12px;
  }

  .swiper-navigation {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-content: center;
    max-width: 100%;
    margin-top: 30px;
  }

  .testimonial-left-arrow {
    width: 50px;
    height: 50px;
    position: static;
    transform: none;
  }

  .slider-arrow {
    width: 24px;
  }

  .testimonial-right-arrow {
    width: 50px;
    height: 50px;
    position: static;
    transform: none;
  }

  .capabilities-section {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .capabilities-grid {
    grid-template-columns: 1fr 1fr;
  }

  .capabilities-item.is-2 {
    justify-content: space-between;
  }

  .capabilities-content-wrap.is-1 {
    width: 50%;
  }

  .capabilities-content-wrap.is-6 {
    width: 60%;
  }

  .capabilities-image-1 {
    width: 280px;
  }

  .capabilities-image-3 {
    position: static;
  }

  .capabilities-image-6 {
    width: 80%;
  }

  .support-section {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .support-inner {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
  }

  .support-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .tab-video-section {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .video-tab-icon {
    display: none;
  }

  .hero-section {
    padding-top: 250px;
  }

  .hero-client-section {
    margin-top: 150px;
  }

  .header-button {
    margin-left: auto;
  }

  .nav-link {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    justify-content: flex-start;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 18px;
    display: inline-flex;
  }

  .nav-link:hover, .nav-link:visited {
    background-color: var(--transparent);
  }

  .navigation {
    z-index: 100;
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    background-color: var(--royal-blue);
    opacity: 0;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: 100vh;
    padding: 50px 30px;
    display: none;
    position: fixed;
    inset: 0% 0% 0% auto;
    overflow: auto;
  }

  .dropdown {
    margin-left: 0;
    margin-right: 0;
  }

  .dropdown-list.w--open {
    min-width: auto;
    margin-top: 20px;
    position: static;
  }

  .footer-top-wrap {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .footer-bottom-wrap {
    text-align: center;
    flex-flow: wrap;
    grid-template-columns: .8fr .7fr 1fr;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .social-media-list {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }

  .social-media-icon {
    width: 20px;
    height: 20px;
  }

  .footer-info-grid {
    grid-template-columns: 1fr;
  }

  .footer-right-box {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .paragraph-xl {
    font-size: 16px;
  }

  .platform-section {
    height: 100%;
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .platform-bg {
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto;
    position: static;
    top: -8%;
  }

  .platform-project-list {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    position: static;
    transform: none;
  }

  .project-box {
    width: 100%;
  }

  .project-content-wrap {
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .project-item {
    width: 100%;
  }

  .copyright-text {
    justify-content: center;
    align-items: center;
  }

  .menu-button {
    color: var(--white);
    margin-left: 20px;
    padding: 0;
  }

  .menu-button.w--open {
    background-color: var(--transparent);
  }

  .menu-bar {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: none;
  }

  .menu-top-line, .menu-middle-line, .menu-bottom-line {
    background-color: var(--white);
    border-radius: 2px;
    width: 25px;
    height: 3px;
    padding: 0;
  }

  .tablet-navbar {
    margin-bottom: 30px;
    display: flex;
  }

  .menu-icon {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .menu-close-button {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
    padding: 0;
    display: flex;
  }

  .menu-close-button.w--open {
    background-color: var(--transparent);
  }

  .platform-scroll-wrap {
    margin-bottom: 50px;
  }

  .typedjs-multiple {
    font-size: 44px;
  }

  .blog-list-grid {
    grid-template-columns: 1fr 1fr;
  }

  .blog-section {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .blog-image-box {
    height: 200px;
  }

  .capabilities-menu-list {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .get-in-touch-popup-box {
    grid-template-columns: 1fr;
  }

  .get-in-touch-popup-left {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .get-in-touch-popup-right {
    display: none;
  }

  .heading-4xl {
    font-size: 24px;
  }

  .radio-button-field {
    padding: 14px 12px;
  }

  .radio-button {
    width: 20px;
    height: 20px;
  }

  .radio-button.w--redirected-checked {
    background-size: 20px 20px;
  }

  .radion-button-label {
    font-size: 16px;
  }

  .hero-cta-download {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .cta-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .container {
    max-width: 95%;
  }

  .heading-6xl {
    font-size: 40px;
  }

  .section-sub-title {
    font-size: 24px;
  }

  .section-summary {
    max-width: 100%;
  }

  .cta-list {
    flex-flow: wrap;
  }

  .cta-badge {
    font-size: 14px;
  }

  .cta-inner-bg {
    padding-top: 30px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .integration-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .integration-box {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .integration-content-wrap {
    width: 100%;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .integration-marquee-item {
    padding: 14px 32px;
  }

  .integration-logo {
    width: 40px;
  }

  .certificate-list {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .certificate-logo {
    height: 78px;
  }

  .certificate-text {
    font-size: 12px;
  }

  .statistics-section {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .statistics-grid {
    grid-row-gap: 40px;
    grid-template-columns: 1fr 1fr;
  }

  .statistics-icon-box {
    margin-bottom: 15px;
  }

  .statistics-number {
    font-size: 42px;
  }

  .testimonial-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .testimonial-slider-wrap {
    padding-left: 0;
    padding-right: 0;
  }

  .testimonial-slide {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
  }

  .capabilities-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .capabilities-item.is-2 {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .capabilities-content-wrap.is-2 {
    margin-bottom: 0;
  }

  .capabilities-content-wrap.is-6 {
    width: 85%;
  }

  .capabilities-title {
    font-size: 22px;
  }

  .capabilities-list.small {
    width: 100%;
  }

  .capabilities-image-6 {
    width: 75%;
  }

  .support-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .support-inner {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .support-grid {
    grid-template-columns: 1fr;
  }

  .tab-video-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .video-tabs-menu {
    width: 100%;
    overflow: auto;
  }

  .video-tab-link {
    width: 200px;
    font-size: 12px;
  }

  .hero-section {
    padding-top: 200px;
    padding-bottom: 40px;
  }

  .hero-content-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .hero-title-wrap {
    width: 100%;
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-client-section {
    margin-top: 100px;
  }

  .navbar {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .navigation {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .dropdown-list.w--open {
    padding: 20px;
  }

  .dropdown-list-inner {
    grid-template-columns: .7fr 1px 1fr;
  }

  .footer-top-wrap {
    grid-template-columns: 1fr 1fr .8fr 1fr;
  }

  .footer-menu-title {
    font-size: 14px;
  }

  .footer-menu-link {
    font-size: 12px;
  }

  .footer-bottom-wrap {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    flex-flow: column;
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .legal-list {
    grid-column-gap: 20px;
    grid-row-gap: 12px;
    justify-content: center;
    align-items: center;
  }

  .social-media-list {
    order: -9999;
  }

  .footer-left-box {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr 1px .8fr;
  }

  .footer-logo {
    width: 200px;
  }

  .footer-summary {
    margin-top: 0;
  }

  .footer-button-wrap {
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 30px;
  }

  .paragraph-xl {
    font-size: 14px;
  }

  .platform-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .project-content-wrap {
    padding-top: 50px;
  }

  .project-item {
    margin-bottom: 16px;
  }

  .heading-2xl {
    font-size: 18px;
  }

  .copyright-text {
    order: 9999;
    width: 100%;
  }

  .tablet-navbar {
    margin-bottom: 20px;
  }

  .menu-close-button {
    margin-left: 10px;
  }

  .hero-title-flex {
    flex-flow: column;
  }

  .typedjs-multiple {
    font-size: 40px;
  }

  .video-tab-link-inner {
    font-size: 12px;
  }

  .copyright-list {
    order: 9999;
  }

  .popup-model {
    bottom: 20px;
    right: 20px;
  }

  .popup-model-content-box {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .model-title {
    width: 230px;
    margin-left: auto;
    margin-right: auto;
  }

  .blog-list-grid {
    grid-template-columns: 1fr;
  }

  .blog-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .blog-image-box {
    height: 300px;
  }

  .capabilities-menu-list {
    grid-column-gap: 15px;
    grid-row-gap: 10px;
  }

  .capabilities-menu-text {
    font-size: 12px;
  }

  .get-in-touch-popup-box {
    border-radius: 16px;
    max-width: 90%;
  }

  .heading-4xl {
    font-size: 22px;
  }
}

@media screen and (max-width: 479px) {
  .cta-section {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .container {
    max-width: 100%;
  }

  .heading-6xl {
    font-size: 33px;
  }

  .section-sub-title {
    margin-bottom: 8px;
  }

  .button-primary.mob-full {
    width: 100%;
  }

  .integration-section {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .integration-inner {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .certificate-list {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .certificate-logo {
    height: 45px;
  }

  .certificate-text {
    font-size: 10px;
  }

  .statistics-number {
    font-size: 36px;
  }

  .testimonial-section {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .testimonial-slider-wrap {
    margin-top: 40px;
  }

  .testimonial-slide {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .testimonial-top-info {
    grid-template-columns: 1fr;
  }

  .swiper-navigation {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-top: 20px;
  }

  .testimonial-left-arrow {
    width: 40px;
    height: 40px;
  }

  .slider-arrow {
    width: 20px;
  }

  .testimonial-right-arrow {
    width: 40px;
    height: 40px;
  }

  .capabilities-section {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .capabilities-inner {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .capabilities-grid {
    flex-flow: column;
    grid-template-columns: 1fr;
    display: flex;
  }

  .capabilities-item {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    padding-bottom: 0;
  }

  .capabilities-content-wrap.is-1 {
    width: 90%;
  }

  .capabilities-content-wrap.is-6 {
    width: 100%;
  }

  .capabilities-list-item {
    font-size: 10px;
  }

  .capabilities-item-icon {
    width: 12px;
  }

  .capabilities-image-1 {
    width: 100%;
    position: static;
    right: 10px;
  }

  .capabilities-image-6 {
    width: 100%;
    position: static;
  }

  .support-section, .tab-video-section {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .hero-section {
    padding-bottom: 30px;
  }

  .hero-title-wrap {
    max-width: 100%;
  }

  .hero-button-group {
    flex-flow: column;
    width: 100%;
  }

  .button-secondary.is-small {
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 8px;
  }

  .hero-client-section {
    margin-top: 75px;
  }

  .hero-client-item {
    width: 100px;
    margin-right: 40px;
  }

  .header-button {
    display: none;
  }

  .nav-link {
    font-size: 16px;
  }

  .navigation {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .dropdown-list.w--open {
    padding-left: 10px;
    padding-right: 10px;
  }

  .dropdown-list-inner {
    grid-template-columns: 1fr;
  }

  .dropdown-divider {
    width: 100%;
    height: 1px;
  }

  .drodown-title {
    margin-bottom: 12px;
  }

  .dropdown-link {
    padding: 6px;
  }

  .footer-top-wrap {
    grid-template-columns: 1fr 1fr;
    padding-top: 45px;
    padding-bottom: 45px;
  }

  .footer-bottom-wrap {
    flex-flow: column;
    justify-content: flex-start;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .footer-left-box {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .footer-right-box {
    padding: 30px 20px;
  }

  .platform-project-list {
    max-width: 100%;
  }

  .project-content-wrap {
    padding: 35px 14px 14px;
  }

  .heading-2xl {
    font-size: 14px;
  }

  .project-desc {
    font-size: 10px;
  }

  .project-tag {
    border-radius: 4px;
    font-size: 7px;
  }

  .project-tag-icon {
    width: 8px;
  }

  .header-button-mobile {
    display: block;
  }

  .typedjs-multiple {
    font-size: 36px;
  }

  .popup-model {
    bottom: 15px;
    right: 15px;
  }

  .model-title {
    width: 100%;
    font-size: 16px;
  }

  .blog-list-grid {
    grid-column-gap: 1rem;
    grid-row-gap: 1.5rem;
  }

  .blog-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .blog-image-box {
    height: 175px;
  }

  .get-in-touch-popup-box {
    padding: 20px;
  }

  .get-in-touch-popup-top {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .heading-4xl {
    font-size: 20px;
  }

  .get-in-touch-popup-bottom {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .radio-button-field {
    padding: 12px 10px;
  }

  .radio-button {
    width: 18px;
    height: 18px;
  }

  .radio-button.w--redirected-checked {
    background-size: 18px 18px;
  }

  .radion-button-label {
    font-size: 13px;
  }
}

/* ==== css/agent-page.css ==== */
/* ==========================================================================
   Conversational Health Platform — page-specific styles
   --------------------------------------------------------------------------
   Everything the live site already styles (navbar, footer, .container,
   .section-content-wrap, .section-tag, .text-gradient, .heading-6xl,
   .section-sub-title, .section-summary, .button-primary, .cta-*, .statistics-*)
   comes from the two Webflow stylesheets and is NOT redefined here.

   This file only adds classes that have no equivalent on the live site.
   Every one is prefixed `agent-` so it maps 1:1 onto a new Webflow class.
   The two exceptions are documented combo classes:
     .heading-6xl.is-blue   .section-tag.is-dark
   ========================================================================== */

/* ==========================================================================
   Site classes this page cannot inherit

   Webflow generates each page's stylesheet from the elements it can see in the
   Designer. This page's markup lives inside HTML embeds, whose contents Webflow
   treats as opaque text — so every class used only inside an embed is pruned
   from the generated page CSS. `.section-tag`, `.cta-box`, `.text-gradient`,
   the `.heading-6xl` / `.section-sub-title` type scale and the rest simply were
   not there, which is why the published page did not match the local HTML.

   Copied verbatim from the site stylesheet so this file stands on its own and
   the page no longer depends on anything Webflow decides to emit. They sit at
   the top so the overrides further down still win.
   ========================================================================== */

.cta-section {padding-top: 96px;
  padding-bottom: 96px;
}

.cta-box {background-image: linear-gradient(90deg, #bf00ff, #fff 50%, #2970ff);
  border-radius: 12px;
  padding: 1px;
  position: relative;
  overflow: hidden;
}

.cta-inner {background-color: #000;
  border-radius: 12px;
  overflow: hidden;
}

.section-content-wrap {z-index: 3;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}

.section-tag {color: var(--white);
  letter-spacing: .08em;
  text-transform: uppercase;
  background-color: #ffffff1a;
  border: 1px solid #fff3;
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 14px;
  line-height: 1.4;
}

.heading-6xl {letter-spacing: -.025em;
  font-size: 50px;
  font-weight: 600;
  line-height: 1.2;
}

.section-sub-title {letter-spacing: -.025em;
  margin-bottom: 5px;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  display: inline-block;
}

.text-gradient {-webkit-text-fill-color: transparent;
  background-image: linear-gradient(89.92deg, #fff9, #fff 40% 60%, #fff9);
  -webkit-background-clip: text;
  background-clip: text;
}

.section-summary {color: #fff9;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.cta-list {z-index: 3;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.cta-badge {grid-column-gap: 5px;
  grid-row-gap: 5px;
  color: var(--white);
  background-color: #0000004d;
  border: 1px solid #fff3;
  border-radius: 8px;
  justify-content: flex-start;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  display: flex;
}

.cta-badge-icon {justify-content: center;
  align-items: center;
  width: 12px;
  display: flex;
}

.cta-inner-bg {grid-column-gap: 60px;
  grid-row-gap: 60px;
  background-color: #ffffff0d;
  border-radius: 12px;
  flex-flow: column;
  width: 100%;
  padding-top: 64px;
  padding-bottom: 15px;
  display: flex;
  overflow: hidden;
}


:root {
  /* Figma tokens that aren't already Webflow variables */
  --text-blue: #4a7dff;     /* Figma "Text Blue" — display headline accent   */
  --primary-600: #215fff;   /* Figma "color/primary/500"                     */
  --surface-1: rgba(255, 255, 255, .05);
  --surface-2: rgba(255, 255, 255, .1);
  --hairline: rgba(255, 255, 255, .1);
  --hairline-strong: rgba(255, 255, 255, .2);
  --ink-90: rgba(255, 255, 255, .9);
  --ink-80: rgba(255, 255, 255, .8);
  --ink-70: rgba(255, 255, 255, .7);
  --ink-60: rgba(255, 255, 255, .6);
  --ink-50: rgba(255, 255, 255, .5);
  --gap: 24px;
}

/* --------------------------------------------------------------------------
   Combo classes on existing live classes
   -------------------------------------------------------------------------- */

/* Second display line is solid blue in this design, not gradient white. */
.heading-6xl.is-blue {
  -webkit-text-fill-color: var(--text-blue);
  color: var(--text-blue);
  background-image: none;
}

/* Badge variant used over imagery / inside cards (darker fill, blurred). */
.section-tag.is-dark {
  background-color: rgba(0, 0, 0, .3);
  border-color: var(--hairline-strong);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 0 8px rgba(0, 0, 0, .2);
}

.section-tag.is-dark svg { flex: none; }

/* --------------------------------------------------------------------------
   Shared section scaffolding
   -------------------------------------------------------------------------- */

.agent-section { position: relative; padding-top: 104px; padding-bottom: 104px; }
.agent-section.is-tight { padding-top: 68px; padding-bottom: 68px; }

.agent-grid { display: grid; gap: var(--gap); }
.agent-grid.is-3 { grid-template-columns: repeat(3, 1fr); }
.agent-grid.is-4 { grid-template-columns: repeat(4, 1fr); }
.agent-grid.is-2 { grid-template-columns: repeat(2, 1fr); }

.agent-card {
  background-color: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.agent-eyebrow {
  color: var(--ink-60);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
}

.agent-section-head { margin-bottom: 45px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.agent-hero {
  position: relative;
  /* Hero + trusted-by fit one screen on a 13" MacBook Air (~1470x800 CSS).
     Capped so that past ~900px of viewport height the hero sizes to its own
     content instead of stretching: space-between was pushing the trusted-by
     row to the floor on tall screens and opening dead space in the middle. */
  min-height: min(100svh, 900px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding-top: 178px;
  padding-bottom: 28px;
}

.agent-hero-bg { position: absolute; inset: 0; z-index: 0; }

.agent-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Keeps the headline legible over the photograph. */
.agent-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .3) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .12) 35%, rgba(0, 0, 0, .94) 100%);
}

.agent-hero .container { position: relative; z-index: 2; }

.agent-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 509px) minmax(0, 497px);
  justify-content: space-between;
  align-items: start;
  gap: 48px;
}

.agent-hero-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 100px; }

.agent-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  padding: 2px 8px;
  border: 1px solid var(--hairline-strong);
  background-color: var(--surface-2);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.agent-hero-badge svg { flex: none; width: 14px; height: 14px; }

.agent-hero-title-wrap { display: flex; flex-direction: column; gap: var(--gap); }

.agent-hero-title { margin: 0; font-size: clamp(40px, 4.1vw, 60px); line-height: 1.04; letter-spacing: -.025em; }
.agent-hero-title .agent-line { display: block; }
.agent-hero-title .agent-line.is-light { font-weight: 400; }
.agent-hero-title .agent-line.is-blue { font-weight: 600; color: var(--text-blue); }

.agent-hero-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(7px, 1.1vh, 12px); max-width: 509px; }

.agent-hero-point { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-80); font-size: clamp(14px, 1.15vw, 17px); line-height: 1.5; }

.agent-hero-point svg { flex: none; width: 18px; height: 18px; margin-top: 4px; color: var(--text-blue); }

.agent-hero-visual { position: relative; }

.agent-hero-visual img {
  width: 100%;
  max-width: 497px;
  height: auto;
  display: block;
  border-radius: 12px;
}

.agent-hero-clients { position: relative; z-index: 2; text-align: center; }

.agent-hero-clients .agent-eyebrow { display: block; margin-bottom: 20px; }

.agent-client-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  flex-wrap: wrap;
}

/* Per-logo heights so the row reads at even optical weight — the supplied
   marks range from a 9:1 wordmark (Gates) to a 1:1 device (Apollo). */
.agent-client-logo { width: auto; object-fit: contain; opacity: .9; }
.agent-client-logo.is-apollo    { height: 52px; opacity: 1; }   /* svg is already 50% */
.agent-client-logo.is-gates     { height: 20px; opacity: 1; }   /* svg is already 50% */
.agent-client-logo.is-nha       { height: 46px; }
.agent-client-logo.is-reliance  { height: 44px; }
.agent-client-logo.is-medanta   { height: 29px; }
.agent-client-logo.is-moolchand { height: 33px; }
.agent-client-logo.is-gynoveda  { height: 22px; }

/* --------------------------------------------------------------------------
   Channels — "Three ways to deploy"
   -------------------------------------------------------------------------- */

.agent-channel-card { min-height: 468px; display: flex; flex-direction: column; }

.agent-channel-copy { padding: 24px 24px 0; display: flex; flex-direction: column; gap: 8px; }

.agent-channel-title { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--text-blue); letter-spacing: -.025em; }

.agent-channel-body { margin: 8px 0 0; color: var(--ink-60); font-size: 14px; line-height: 20px; }

/* The mockups bleed off the bottom edge of the card, as drawn. */
.agent-channel-visual { margin-top: auto; padding: 0 24px; position: relative; height: 238px; overflow: hidden; }

.agent-channel-visual img { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   Capabilities — three wide rows + four mini cards
   -------------------------------------------------------------------------- */

.agent-capability-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: var(--gap);
  min-height: 313px;
  margin-bottom: var(--gap);
  padding: 24px;
}

.agent-capability-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 480px; }

.agent-capability-title { margin: 0; font-size: 30px; line-height: 36px; font-weight: 400; letter-spacing: -.025em; color: #fff; }

.agent-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 229px)); gap: 16px 24px; margin-top: 12px; }

.agent-feature { display: flex; gap: 8px; align-items: flex-start; }

.agent-feature svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--text-blue); }

.agent-feature p { margin: 0; color: var(--ink-70); font-size: 14px; line-height: 20px; }

/* Two overlapping product shots, anchored to the right edge of the row.
   This panel must STRETCH: it is full-bleed to the card edges and the snippet
   inside is position:absolute; inset:0, so it has no height of its own. Do not
   centre the grid item — that collapses the whole panel to zero. */
.agent-capability-visual { position: relative; min-height: 269px; }

.agent-capability-visual img {
  position: absolute;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  display: block;
}

.agent-capability-visual .is-far { right: 0; top: -4px; width: 239px; }
.agent-capability-visual .is-near { right: 198px; top: 20px; width: 239px; }

/* Row 3 has no artwork in the Figma yet — these render as the empty plates it shows. */
.agent-capability-visual .is-placeholder {
  background-color: rgba(255, 255, 255, .08);
  border-style: dashed;
}

.agent-mini-card { padding: 20px 24px 24px; min-height: 160px; display: flex; flex-direction: column; }

/* The icon reads as balanced only when it sits close to the corner rather
   than inside the card's own text padding, so it is pulled back out of it. */
.agent-mini-head .agent-mini-icon { margin-top: -6px; margin-right: -10px; }

.agent-mini-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.agent-mini-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: #fff; letter-spacing: -.025em; }

.agent-mini-icon {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: var(--surface-1);
  border: 1px solid var(--hairline);
  color: var(--ink-80);
}

.agent-mini-body { margin: 12px 0 0; color: var(--ink-60); font-size: 14px; line-height: 20px; }

/* --------------------------------------------------------------------------
   Statistics
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Statistics — one lead figure carrying the band, three supporting rows.
   The four numbers were never equals; four centred columns in an open black
   field gave them no structure and nothing to anchor against.
   -------------------------------------------------------------------------- */

/* Same four-column track as the mini-card grid above, with each half spanning
   two columns — so the lead panel's right edge lands exactly where the second
   mini-card ends. A bespoke 1.15fr/1fr split does not line up with it. */
.agent-stat-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.agent-stat-lead { grid-column: span 2; }
.agent-stat-rows { grid-column: span 2; }

.agent-stat-lead {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  padding: 34px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background-color: var(--surface-1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

/* A slow bloom behind the headline figure so the band is never static. */
.agent-stat-lead::after {
  content: "";
  position: absolute;
  left: -120px; bottom: -220px;
  width: 440px; height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 125, 255, .3), rgba(74, 125, 255, 0) 66%);
  pointer-events: none;
}

.agent-stat-lead > * { position: relative; z-index: 1; }

.agent-stat-lead-number {
  margin: 0;
  font-size: clamp(54px, 5.4vw, 78px);
  line-height: .95;
  font-weight: 500;
  color: var(--text-blue);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.agent-stat-lead-label { margin: 10px 0 0; font-size: 16px; line-height: 24px; color: var(--ink-80); }
.agent-stat-lead-note { margin: 0; max-width: 34ch; color: var(--ink-50); font-size: 13px; line-height: 20px; }

.agent-stat-rows { display: flex; flex-direction: column; gap: var(--gap); }

.agent-stat-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background-color: var(--surface-1);
}

.agent-stat { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0; }

.agent-stat-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background-color: var(--surface-1);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-blue);
}

.agent-stat-number { margin: 0; font-size: 27px; line-height: 1; font-weight: 500; color: var(--text-blue); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }

.agent-stat-label { margin: 3px 0 0; color: var(--ink-60); font-size: 13px; line-height: 19px; }

/* --------------------------------------------------------------------------
   How it works — console shot with three step cards overlapping it
   -------------------------------------------------------------------------- */

.agent-console {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  position: relative;
}

.agent-console img { width: 100%; height: auto; display: block; }

/* Mask that lets the cards read against the lower half of the screenshot. */
.agent-console:after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 60%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .85) 70%, #000 100%);
}

/* Inset so the row sits within the screenshot behind it rather than
   running out to the same edges. */
.agent-step-grid { position: relative; z-index: 2; margin-top: -169px; padding-left: 48px; padding-right: 48px; }

.agent-step-card { padding: 24px; min-height: 300px; display: flex; flex-direction: column; background-color: rgba(10, 10, 10, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

.agent-step-index { color: var(--ink-60); font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }

.agent-step-title { margin: 16px 0 0; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--text-blue); letter-spacing: -.025em; }

/* margin-bottom, not just the tag block's padding: the tag grid is pushed down
   with margin-top:auto, and on the card whose copy is longest that auto
   collapses to 0 and the rule ends up hugging the last line. */
.agent-step-body { margin: 8px 0 22px; color: var(--ink-60); font-size: 14px; line-height: 20px; }

.agent-step-tags { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }

.agent-step-tag { color: var(--ink-60); font-size: 11px; line-height: 20px; letter-spacing: .06em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Built for India — languages + specialities
   -------------------------------------------------------------------------- */

.agent-coverage-card { padding: 24px; display: flex; flex-direction: column; min-height: 448px; }

.agent-coverage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }

.agent-coverage-title { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--text-blue); letter-spacing: -.025em; }

.agent-coverage-sub { margin: 2px 0 0; color: var(--ink-50); font-size: 14px; line-height: 20px; }

.agent-coverage-figure { font-size: 48px; line-height: 60px; font-weight: 600; color: var(--text-blue); letter-spacing: -.025em; }

.agent-lang-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 24px; }

.agent-lang-tile {
  background-color: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}

.agent-lang-native { display: block; color: var(--ink-80); font-size: 16px; line-height: 28px; }
.agent-lang-latin { display: block; color: var(--ink-50); font-size: 12px; line-height: 16px; }

.agent-spec-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

.agent-spec-chip {
  background-color: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 4px 12px;
  color: var(--ink-80);
  font-size: 14px;
  line-height: 24px;
}

.agent-coverage-note { margin: auto 0 0; padding-top: 24px; color: var(--ink-60); font-size: 14px; line-height: 20px; }

/* --------------------------------------------------------------------------
   Patient journey — five connected steps
   -------------------------------------------------------------------------- */

.agent-flow { display: flex; align-items: stretch; }

.agent-flow-step { flex: 1 1 0; min-width: 0; padding: 12px 16px 16px; min-height: 244px; display: flex; flex-direction: column; }

.agent-flow-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.agent-flow-index { color: var(--ink-60); font-size: 12px; line-height: 20px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }

/* Stroke-only — the Figma icons sat on a filled plate, which is dropped here. */
.agent-flow-icon { flex: none; color: var(--text-blue); display: flex; }
.agent-flow-icon svg { width: 34px; height: 34px; display: block; }

.agent-flow-title { margin: auto 0 0; font-size: 20px; line-height: 32px; font-weight: 600; color: var(--text-blue); letter-spacing: -.025em; }

.agent-flow-body { margin: 4px 0 0; color: var(--ink-60); font-size: 14px; line-height: 20px; }

.agent-flow-link { flex: 0 0 24px; align-self: center; height: 1px; background-color: rgba(255, 255, 255, .25); }

/* --------------------------------------------------------------------------
   CTA — matched to Figma 1655:2588 / 1655:2589 rather than the live component.

   The live .cta-box is a 1px purple-to-blue gradient border over a black
   .cta-inner. The design calls for a flat rgba(33,95,255,.3) hairline over a
   white/5 fill, with the blurred blue gradient (1655:2589) glowing up from the
   bottom edge. That gradient is reproduced in CSS rather than shipped as the
   exported SVG: the Figma layer is two #215FFF→#001AFF shapes under a 32px
   blur and a clip, which reads as a bottom-anchored wash — cheaper and
   tunable as radial-gradients, and one less asset to upload to Webflow.
   -------------------------------------------------------------------------- */

.cta-section .cta-box {
  padding: 0;
  background-image: none;
  border: 1px solid rgba(33, 95, 255, .3);
}

.cta-section .cta-inner { background-color: transparent; }

.cta-section .cta-inner-bg {
  position: relative;
  background-color: rgba(255, 255, 255, .05);
  background-image:
    radial-gradient(118% 76% at 50% 124%, rgba(0, 26, 255, .9) 0%, rgba(33, 95, 255, .5) 36%, rgba(33, 95, 255, 0) 70%),
    radial-gradient(58% 38% at 50% 103%, rgba(74, 125, 255, .5) 0%, rgba(74, 125, 255, 0) 72%),
    radial-gradient(64% 42% at 50% -12%, rgba(33, 95, 255, .18) 0%, rgba(33, 95, 255, 0) 72%);
}

.cta-section .cta-inner-bg > * { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   Responsive — the Figma is desktop-only (1440), these breakpoints are
   authored to match the behaviour the live eka.care site already uses.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
  .agent-section { padding-top: 68px; padding-bottom: 68px; }
  .agent-section-head { margin-bottom: 34px; }

  .agent-hero { min-height: 0; padding-top: 176px; padding-bottom: 56px; }
  .agent-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .agent-hero-badges { margin-bottom: 40px; }
  .agent-hero-title { font-size: 48px; }
  .agent-hero-visual img { margin: 0 auto; }
  .agent-hero-overlay { background: linear-gradient(180deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .55) 40%, rgba(0, 0, 0, .95) 100%); }

  .agent-grid.is-3, .agent-grid.is-4 { grid-template-columns: repeat(2, 1fr); }

  .agent-channel-card { min-height: 0; }
  .agent-channel-visual { height: 220px; }

  .agent-capability-row { grid-template-columns: 1fr; min-height: 0; }
  .agent-capability-copy { max-width: none; }
  .agent-capability-visual { min-height: 320px; }
  .agent-capability-visual .is-far { right: 0; }
  .agent-capability-visual .is-near { right: 190px; }

  .agent-step-grid { margin-top: -96px; padding-left: 24px; padding-right: 24px; }
  .agent-step-card { min-height: 0; }

  .agent-grid.is-2 { grid-template-columns: 1fr; }
  .agent-coverage-card { min-height: 0; }

  /* Five steps in a row doesn't fit — wrap into a grid and drop the connectors. */
  .agent-flow { flex-wrap: wrap; gap: var(--gap); }
  .agent-flow-step { flex: 1 1 calc(50% - 12px); min-height: 0; }
  .agent-flow-link { display: none; }
}

@media screen and (max-width: 767px) {
  .agent-section { padding-top: 50px; padding-bottom: 50px; }

  .agent-hero-title { font-size: 38px; }
  .agent-hero-point { font-size: 15px; line-height: 23px; }
  .agent-hero-point svg { width: 16px; height: 16px; margin-top: 3px; }
  .agent-hero-badges { gap: 8px; margin-bottom: 32px; }
  .agent-hero-badge { font-size: 12px; }

  .agent-client-row { gap: 24px 28px; }
  .agent-client-logo.is-apollo    { height: 38px; }
  .agent-client-logo.is-gates     { height: 15px; }
  .agent-client-logo.is-nha       { height: 34px; }
  .agent-client-logo.is-reliance  { height: 30px; }
  .agent-client-logo.is-medanta   { height: 19px; }
  .agent-client-logo.is-moolchand { height: 22px; }
  .agent-client-logo.is-gynoveda  { height: 16px; }
  .navbar .header-logo svg { height: 32px; }
  .footer .footer-logo svg { height: 58px; }

  .agent-grid.is-3, .agent-grid.is-4 { grid-template-columns: 1fr; }

  .agent-feature-grid { grid-template-columns: 1fr; }

  /* Overlap reads as clutter at this width — stack the two shots instead. */
  .agent-capability-visual { min-height: 0; display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
  .agent-capability-visual .is-far,
  .agent-capability-visual .is-near { position: static; width: 200px; flex: none; }

  .agent-step-grid { margin-top: 24px; padding-left: 0; padding-right: 0; }
  .agent-console:after { display: none; }
  .agent-step-card { background-color: var(--surface-1); }

  .agent-lang-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .agent-coverage-head { flex-direction: column; gap: 8px; }
  .agent-coverage-figure { font-size: 40px; line-height: 48px; }

  .agent-flow-step { flex: 1 1 100%; }
  .agent-stat-band { grid-template-columns: minmax(0, 1fr); }
  .agent-stat-lead, .agent-stat-rows { grid-column: auto; }
}

/* ==========================================================================
   Motion — ported from the ABDM Connect API revamp page's custom code.
   Behaviour lives in js/agent-motion.js; this is the styling half.
   ========================================================================== */

/* Lenis + overflow guards, verbatim from the ABDM page. */
html, body { overscroll-behavior-y: none; }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* --------------------------------------------------------------------------
   On-load appear — hero only, staggered like the ABDM hero
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @keyframes agent-rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes agent-panel-in { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes agent-fade-in { from { opacity: 0; } to { opacity: 1; } }

  .agent-hero-badges  { animation: agent-rise-in .7s cubic-bezier(.215, .61, .355, 1) .05s both; }
  .agent-hero-title   { animation: agent-rise-in .8s cubic-bezier(.215, .61, .355, 1) .12s both; }
  .agent-hero-sub     { animation: agent-rise-in .8s cubic-bezier(.215, .61, .355, 1) .18s both; }
  .agent-hero-list    { animation: agent-rise-in .8s cubic-bezier(.215, .61, .355, 1) .26s both; }
  .agent-hero-title-wrap .button-wrap { animation: agent-rise-in .8s cubic-bezier(.215, .61, .355, 1) .32s both; }
  .agent-hero-visual  { animation: agent-panel-in 1s cubic-bezier(.215, .61, .355, 1) .2s both; }
  .agent-hero-clients { animation: agent-fade-in 1s ease .5s both; }

  .agent-client-logo { animation: agent-rise-in .6s cubic-bezier(.215, .61, .355, 1) both; }
  .agent-client-logo:nth-child(1) { animation-delay: .50s; }
  .agent-client-logo:nth-child(2) { animation-delay: .57s; }
  .agent-client-logo:nth-child(3) { animation-delay: .64s; }
  .agent-client-logo:nth-child(4) { animation-delay: .71s; }
  .agent-client-logo:nth-child(5) { animation-delay: .78s; }
}

/* --------------------------------------------------------------------------
   Scroll reveal — JS adds .agent-reveal, then .is-in, then removes both
   -------------------------------------------------------------------------- */

.agent-reveal { opacity: 0; transform: translateY(22px); }

.agent-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.215, .61, .355, 1),
              transform .8s cubic-bezier(.215, .61, .355, 1);
}

/* --------------------------------------------------------------------------
   Brand — the Eka Agents lockup replaces the eka.care mark on this page.
   Its wordmark pill is light blue, so it reads on the transparent nav.
   -------------------------------------------------------------------------- */

.navbar .header-logo svg { display: block; height: 40px; width: auto; }
.footer .footer-logo { width: auto; }
.footer .footer-logo svg { display: block; height: 74px; width: auto; }

/* --------------------------------------------------------------------------
   Navbar — transparent over the hero, filled once past it (matches the
   behaviour on homepage.eka.care). JS toggles .is-scrolled on .navbar.
   -------------------------------------------------------------------------- */

.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
}

.navbar .navbar-inner {
  background-color: transparent;
  /* The hairline is drawn as an inset shadow, not a border: a real border
     pushes the contents 1px in from the container edge and changes the bar's
     height when it appears. An inset shadow does neither. */
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}

.navbar.is-scrolled .navbar-inner {
  background-color: rgba(10, 12, 18, .72);
  border-color: var(--hairline);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

@media (prefers-reduced-motion: reduce) {
  .navbar .navbar-inner { transition: none; }
}

/* --------------------------------------------------------------------------
   Footer — hovers snap, matching the buttons.

   The live stylesheet sets a global `a { transition: all .35s ease-in-out }`.
   Buttons appear instant only because .button-primary:hover changes
   background-image, which isn't an animatable property — while footer links
   change `color`, which is, so they fade over 350ms. Killing the transition
   inside the footer makes them behave like the buttons.
   -------------------------------------------------------------------------- */

.footer a,
.footer a:hover,
.footer a:focus,
.footer .footer-menu-link,
.footer .footer-button,
.footer .footer-logo,
.footer [class*="social"] { transition: none !important; }

/* --------------------------------------------------------------------------
   Lite mode — low-end device / saveData fallback, same idea as html.ac-lite
   -------------------------------------------------------------------------- */

html.agent-lite .agent-reveal { opacity: 1; transform: none; }

html.agent-lite .agent-hero-badges,
html.agent-lite .agent-hero-title,
html.agent-lite .agent-hero-list,
html.agent-lite .agent-hero-sub,
html.agent-lite .agent-hero-title-wrap .button-wrap,
html.agent-lite .agent-hero-visual,
html.agent-lite .agent-hero-clients,
html.agent-lite .agent-client-logo { animation: none; }

html.agent-lite .navbar .navbar-inner,
html.agent-lite .cta-section .cta-inner-bg { -webkit-backdrop-filter: none; backdrop-filter: none; }

@media (prefers-reduced-motion: reduce) {
  .agent-reveal, .agent-reveal.is-in { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Round 3 — hero video, layout, crisp headings, snippets, CTA glow
   Everything here is scoped to this page's own classes; nothing touches
   eka.care, whose stylesheet is loaded but never overridden below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero background video — blurred, under the existing black overlay
   -------------------------------------------------------------------------- */

.agent-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.agent-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Scaled up so the blur doesn't reveal soft edges at the frame border. */
  transform: scale(1.08);
  filter: blur(7px) saturate(1.05);
}

/* --------------------------------------------------------------------------
   Hero layout — badges level with the top of the animation, copy beneath
   -------------------------------------------------------------------------- */

.agent-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(380px, 34vw, 497px));
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

/* The two display lines each take the column's full width rather than
   wrapping early against an arbitrary max. */
.agent-hero-copy > * { width: 100%; }
.agent-hero-title { width: 100%; white-space: nowrap; }
.agent-hero-list { max-width: none; }
.agent-hero-point { max-width: 34em; }

.agent-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }

/* Badges are the first thing in the copy column, so they share a top edge
   with the animation beside them. */
.agent-hero-copy .agent-hero-badges { margin: 0 0 clamp(32px, 5.4vh, 76px); }

.agent-hero-copy .agent-hero-title { margin-bottom: clamp(14px, 2vh, 22px); }

/* Says what the product is: a chatbot you deploy, not a vague promise. */
.agent-hero-sub {
  margin: 0 0 clamp(18px, 2.6vh, 30px);
  max-width: 34em;
  color: var(--ink-70);
  font-size: clamp(14px, 1.05vw, 16.5px);
  line-height: 1.55;
  font-weight: 400;
}
.agent-hero-copy .agent-hero-list { margin-bottom: clamp(30px, 4.6vh, 52px); }

.agent-hero-visual { position: relative; width: 100%; }

.agent-hero-clients { margin-top: clamp(28px, 4vh, 64px); }

/* --------------------------------------------------------------------------
   Partner logos — supplied order, with the stagger following it
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .agent-client-logo:nth-child(1) { animation-delay: .50s; }
  .agent-client-logo:nth-child(2) { animation-delay: .56s; }
  .agent-client-logo:nth-child(3) { animation-delay: .62s; }
  .agent-client-logo:nth-child(4) { animation-delay: .68s; }
  .agent-client-logo:nth-child(5) { animation-delay: .74s; }
  .agent-client-logo:nth-child(6) { animation-delay: .80s; }
  .agent-client-logo:nth-child(7) { animation-delay: .86s; }
}

/* --------------------------------------------------------------------------
   Display headings — plain solid colour

   These carried a scroll-linked "sweep": a dim base with a bright copy in an
   ::after, revealed by clip-path off --sweep. It was fragile — it depended on
   JS to be legible at all, and the absolutely-positioned ::after sat outside
   the heading's flow, so it overlapped the summary beneath and clipped its own
   descenders. Removed; the headings are simply the colour they should be, as
   in the original design. `data-text` is left on the markup, unused.
   -------------------------------------------------------------------------- */

.text-gradient.agent-sweep,
.agent-sweep .text-gradient {
  -webkit-text-fill-color: currentColor;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

.agent-sweep .section-sub-title,
.agent-sweep .heading-6xl {
  position: static;
  -webkit-text-fill-color: currentColor;
  background-image: none;
}

.agent-sweep .section-sub-title { color: #fff; }
.agent-sweep .heading-6xl.is-blue { color: var(--text-blue); }

.agent-sweep .section-sub-title::after,
.agent-sweep .heading-6xl::after { content: none; }

/* The hero headline is always fully lit — no sweep, no clipping. */
.agent-hero-title .agent-line.is-light { color: #fff; -webkit-text-fill-color: #fff; background-image: none; }

/* --------------------------------------------------------------------------
   Animated snippets — bleeding to the card edges
   -------------------------------------------------------------------------- */

.agent-channel-visual {
  margin-top: auto;
  padding: 0;
  height: 246px;
  position: relative;
  overflow: hidden;
}

.agent-capability-visual {
  position: relative;
  overflow: hidden;
  min-height: 0;
  margin: -24px -24px -24px 0;
  border-radius: 0 12px 12px 0;
}

.agent-capability-visual .agent-snip { position: absolute; inset: 0; }

/* --------------------------------------------------------------------------
   CTA — the glow lights up as the section scrolls in
   -------------------------------------------------------------------------- */

.cta-section .cta-inner-bg {
  position: relative;
  background-color: rgba(255, 255, 255, .05);
  background-image: none;
  isolation: isolate;
}

.cta-section .cta-inner-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--cta-glow, 0);
  transition: opacity .25s linear;
  background-image:
    radial-gradient(118% 76% at 50% 124%, rgba(0, 26, 255, .9) 0%, rgba(33, 95, 255, .5) 36%, rgba(33, 95, 255, 0) 70%),
    radial-gradient(58% 38% at 50% 103%, rgba(74, 125, 255, .5) 0%, rgba(74, 125, 255, 0) 72%),
    radial-gradient(64% 42% at 50% -12%, rgba(33, 95, 255, .18) 0%, rgba(33, 95, 255, 0) 72%);
}

.cta-section .cta-inner-bg > * { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   Patient journey — titles on one line regardless of body length
   -------------------------------------------------------------------------- */

/* Anchoring the title to a fixed offset from the top (rather than pushing it
   off the bottom with margin:auto) keeps all five aligned. */
.agent-flow-top { height: 96px; align-items: flex-start; }
.agent-flow-icon { width: 80px; height: 80px; display: block; }
.agent-flow-title { margin: 0; }
.agent-flow-body { margin-top: 6px; }
.agent-flow-step { justify-content: flex-start; }

/* --------------------------------------------------------------------------
   Supporting-card icons — supplied 48px plates
   -------------------------------------------------------------------------- */

.agent-mini-icon {
  width: 48px; height: 48px; flex: none; display: block;
  background: none; border: 0; border-radius: 0; padding: 0;
}

/* --------------------------------------------------------------------------
   Body copy — lighter and smaller, matching the Figma text styles
   -------------------------------------------------------------------------- */

.agent-channel-body,
.agent-mini-body,
.agent-step-body,
.agent-coverage-note,
.agent-feature p {
  font-size: 13px;
  line-height: 19px;
  font-weight: 400;
  color: rgba(255, 255, 255, .55);
  letter-spacing: 0;
}

.agent-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .09em; color: rgba(255, 255, 255, .5); }
.agent-coverage-sub { font-size: 13px; color: rgba(255, 255, 255, .5); }
.agent-flow-body { font-size: 12.5px; line-height: 18px; color: rgba(255, 255, 255, .5); }
.agent-stat-label { font-size: 14px; line-height: 21px; font-weight: 400; color: rgba(255, 255, 255, .6); }
.agent-step-tag { font-size: 10.5px; font-weight: 500; color: rgba(255, 255, 255, .5); }
.agent-lang-latin { font-size: 11px; color: rgba(255, 255, 255, .45); }
.agent-spec-chip { font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, .75); }
.section-summary { font-weight: 400; }

@media screen and (max-width: 991px) {
  .agent-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .agent-hero-copy .agent-hero-badges { margin-bottom: 28px; }
  .agent-hero-clients { margin-top: 48px; }
  .agent-hero-video { filter: blur(6px); }
  .agent-capability-visual { margin: 0; border-radius: 12px; position: relative; min-height: 300px; }
  .agent-flow-top { height: 80px; }
  .agent-flow-icon { width: 64px; height: 64px; }
}

@media screen and (max-width: 767px) {
  .agent-channel-visual { height: 210px; }
  .agent-capability-visual { min-height: 260px; }
}

/* ==========================================================================
   Round 5
   ========================================================================== */

/* --- 2. navbar + primary button join the hero's appear sequence ---------- */

@media (prefers-reduced-motion: no-preference) {
  .navbar { animation: agent-fade-in .7s ease .05s both; }
  .navbar .navbar-inner { animation: agent-rise-in .7s cubic-bezier(.215, .61, .355, 1) .1s both; }
  /* The button-wrap selector moved when the hero was restructured, so the CTA
     had quietly lost its entrance. */
  .agent-hero-copy .button-wrap { animation: agent-rise-in .8s cubic-bezier(.215, .61, .355, 1) .34s both; }
}

html.agent-lite .navbar,
html.agent-lite .navbar .navbar-inner,
html.agent-lite .agent-hero-copy .button-wrap { animation: none; }

/* --- 5. cards with a snippet get a hover state of their own -------------- */

.agent-channel-card,
.agent-capability-row {
  transition: border-color .35s ease, background-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}

.agent-channel-card:hover,
.agent-capability-row:hover {
  border-color: rgba(74, 125, 255, .34);
  background-color: rgba(255, 255, 255, .07);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(74, 125, 255, .06);
}

.agent-channel-card:hover { transform: translateY(-3px); }

/* --- 7. rolling shimmer on the language tiles and speciality chips ------- */

.agent-lang-tile,
.agent-spec-chip {
  position: relative;
  overflow: hidden;
  transition: border-color .3s ease, background-color .3s ease;
}

.agent-lang-tile::after,
.agent-spec-chip::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 55%;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .14) 45%,
    rgba(122, 162, 255, .22) 55%,
    rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  opacity: 0;
}

/* Only the tile under the pointer shimmers — hovering the card no longer
   fires every tile at once. */
.agent-lang-tile:hover::after,
.agent-spec-chip:hover::after {
  animation: agent-shimmer 1.05s cubic-bezier(.4, 0, .3, 1) both;
}

.agent-lang-tile:hover,
.agent-spec-chip:hover {
  background-color: rgba(74, 125, 255, .12);
  border-color: rgba(74, 125, 255, .45);
}

@keyframes agent-shimmer {
  from { left: -60%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  to   { left: 115%; opacity: 0; }
}


/* --- 8. journey cards: copy sits at the bottom, titles stay aligned ------ */

.agent-flow-step { display: flex; flex-direction: column; }

/* The spacer takes the slack, so the title/body block is bottom-anchored …  */
.agent-flow-top { height: auto; }
.agent-flow-foot { margin-top: auto; }

/* … and a fixed body height keeps every title on the same line despite the
   bodies being one or two lines long. */
.agent-flow-body { min-height: 36px; margin-top: 6px; }

/* --- 10. navbar fill kicks in after 60% of the viewport ----------------- */

.navbar .navbar-inner {
  transition: background-color .35s ease, border-color .35s ease,
              backdrop-filter .35s ease, box-shadow .35s ease,
              padding-left .35s ease, padding-right .35s ease;
}

.navbar.is-scrolled .navbar-inner {
  background-color: rgba(10, 12, 20, .88);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 12px 38px rgba(0, 0, 0, .50),
              inset 0 0 0 1px rgba(255, 255, 255, .12),
              inset 0 1px 0 rgba(255, 255, 255, .09);
  padding-left: 8px;
  padding-right: 8px;
}

@media screen and (max-width: 991px) {
  .agent-hero-title { white-space: normal; }
}

/* On short viewports (13" laptops) trim the logo row so the hero and the
   trusted-by strip still share one screen. */
@media screen and (max-height: 880px) and (min-width: 992px) {
  .agent-hero { padding-top: 140px; padding-bottom: 20px; }
  .agent-client-row { gap: 34px; }
  .agent-client-logo.is-apollo    { height: 40px; }
  .agent-client-logo.is-gates     { height: 16px; }
  .agent-client-logo.is-nha       { height: 36px; }
  .agent-client-logo.is-reliance  { height: 34px; }
  .agent-client-logo.is-medanta   { height: 23px; }
  .agent-client-logo.is-moolchand { height: 26px; }
  .agent-client-logo.is-gynoveda  { height: 18px; }
  .agent-hero-clients .agent-eyebrow { margin-bottom: 12px; }
}

/* ==========================================================================
   No-JS baseline — the page must read correctly before the script runs

   These effects were authored "off by default, switched on by JS":
   a fully transparent navbar, an unlit CTA panel. Anywhere the script does not
   run, that is not a missing animation — it is a broken page. Headings render
   as a dim base sitting under a bright copy, and page content reads straight
   through the navbar. The Webflow Designer canvas does not execute scripts
   inside HTML embeds, so that is exactly what the canvas showed.

   The end state is now the default. js/agent-motion.js sets html.agent-motion
   as its first statement, and only then are the animations armed.
   ========================================================================== */

.cta-section .cta-inner-bg::before { opacity: var(--cta-glow, 1); }

.navbar .navbar-inner {
  background-color: rgba(10, 12, 20, .88);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 12px 38px rgba(0, 0, 0, .50),
              inset 0 0 0 1px rgba(255, 255, 255, .12),
              inset 0 1px 0 rgba(255, 255, 255, .09);
  padding-left: 8px;
  padding-right: 8px;
}

/* ---- armed: the script is alive, so start from the animatable state ---- */

html.agent-motion .cta-section .cta-inner-bg::before { opacity: var(--cta-glow, 0); }

html.agent-motion .navbar .navbar-inner {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  /* No fill means no box to sit inside — drop the side padding so the logo and
     the CTA align with the container edge. It comes back with the fill. */
  padding-left: 0;
  padding-right: 0;
}

html.agent-motion .navbar.is-scrolled .navbar-inner {
  background-color: rgba(10, 12, 20, .88);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 12px 38px rgba(0, 0, 0, .50),
              inset 0 0 0 1px rgba(255, 255, 255, .12),
              inset 0 1px 0 rgba(255, 255, 255, .09);
  padding-left: 8px;
  padding-right: 8px;
}

/* --------------------------------------------------------------------------
   Inherited classes that were never recoloured for a dark page

   `.section-tag.is-dark` (the capability row pills) and `.cta-badge` come from
   the live site stylesheet, which colours them for a light surface — they
   resolve to its #333 body colour. On this page that is near-black text on a
   near-black panel, and the inline `.agent-ic` SVGs stroke `currentColor`, so
   the icons vanished too and read as empty boxes.

   `.agent-ic` is deliberately left inheriting: every other icon on the page
   picks up a deliberate colour from its container. These two containers had
   none to give.
   -------------------------------------------------------------------------- */

.agent-capability-copy .section-tag.is-dark { color: rgba(255, 255, 255, .82); }
.agent-capability-copy .section-tag.is-dark .agent-ic { color: var(--text-blue); }

.cta-section .cta-badge { color: rgba(255, 255, 255, .72); }
.cta-section .cta-badge .agent-ic,
.cta-section .cta-badge-icon .agent-ic { color: var(--text-blue); }

/* ==========================================================================
   Built for India — autoplaying coverage animations
   --------------------------------------------------------------------------
   Two different motions, one per card, because the two lists make different
   points. Languages are a finite set worth naming one at a time; specialities
   are a long tail whose point is that it does not end.

   Both are armed by `html.agent-motion`, so with no JS — the Webflow canvas,
   a failed request — the cards render as the plain grids they are authored as.
   ========================================================================== */

/* --- language card: a relay spotlight, one tile at a time ---------------- */

html.agent-motion .agent-lang-tile {
  transition: border-color .45s ease, background-color .45s ease,
              transform .45s cubic-bezier(.22, 1, .36, 1);
}

html.agent-motion .agent-lang-tile.is-lit {
  border-color: rgba(74, 125, 255, .75);
  background-color: rgba(74, 125, 255, .15);
  transform: translateY(-3px);
}

html.agent-motion .agent-lang-tile.is-lit .agent-lang-latin { color: var(--ink-80); }

/* The caption under the grid says a real patient line in the lit language.
   Hidden until the script runs, since without it there is nothing to cycle. */
.agent-say { display: none; }

html.agent-motion .agent-say {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  min-height: 46px;
}

.agent-say-dot {
  flex: none;
  width: 6px; height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background-color: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, .5);
  animation: agent-say-pulse 2s ease-out infinite;
}

@keyframes agent-say-pulse { to { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } }

.agent-say-text { margin: 0; font-size: 13px; line-height: 19px; color: var(--ink-60); }
.agent-say-text b { color: #fff; font-weight: 500; }
.agent-say-text span { margin-left: 8px; white-space: nowrap; }

/* --- speciality card: rows that drift, and slow down under the pointer --- */

/* The rows bleed past the card's padding to its own edges and fade out there,
   rather than being sliced mid-chip at the boundary. */
html.agent-motion .agent-spec-grid.is-drifting {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
  margin-left: -24px;
  margin-right: -24px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.agent-spec-row { display: flex; gap: 8px; width: max-content; }
.agent-spec-row > * { flex: none; }

/* Each row carries its chips twice, so -50% lands exactly on a repeat. */
.agent-spec-row.is-r1 { animation: agent-drift-left 48s linear infinite; }
.agent-spec-row.is-r2 { animation: agent-drift-right 54s linear infinite; }
.agent-spec-row.is-r3 { animation: agent-drift-left 42s linear infinite; }

@keyframes agent-drift-left  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes agent-drift-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Slows to a quarter speed on hover — it never stops, so the section keeps
   moving while someone reads a chip. */
/* Hover no longer rewrites animation-duration — remapping the elapsed time onto
   a new duration is what made the rows jump. The script drives the drift with
   the Web Animations API and eases playbackRate instead, and switches the CSS
   animation off here so the two are not both running. */
.agent-spec-grid.is-waapi .agent-spec-row { animation: none; }

html.agent-lite .agent-spec-row,
html.agent-lite .agent-say-dot { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .agent-spec-row, .agent-say-dot { animation: none; }
  html.agent-motion .agent-lang-tile { transition: none; }
}

@media screen and (max-width: 767px) {
  html.agent-motion .agent-spec-grid.is-drifting { margin-left: -20px; margin-right: -20px; }
}

/* ==========================================================================
   Custom navbar
   --------------------------------------------------------------------------
   A plain full-width bar: the fill spans the viewport and the items sit inside
   the page container, so the bar's edges never move and there is no padding to
   swap on scroll. It is transparent over the hero and fills past it.

   Two link groups that must not be mistaken for each other: on-page anchors sit
   against the logo and mark their place with a rule underneath; site links sit
   against the CTA as plain text.
   ========================================================================== */

/* The fill and the blur live on a pseudo-element, NOT on .agent-nav itself.
   A backdrop-filter other than `none` turns an element into the containing
   block for its position:fixed descendants — which would make the mobile menu
   (fixed, top:64px, bottom:0) resolve inside the 64px bar and vanish, but only
   once the bar had gained its fill. That is why the menu opened correctly at
   the top of the page and not after scrolling. */
.agent-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}

.agent-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--nav-fill, rgba(10, 12, 20, .88));
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .1);
  transition: opacity .35s ease, background-color .35s ease;
}

/* Everything in the bar sits above that layer. */
.agent-nav-bar { position: relative; z-index: 1; }

/* Default (no JS) is the filled state. */
html.agent-motion .agent-nav::before { opacity: 0; }
html.agent-motion .agent-nav.is-scrolled::before { opacity: 1; }

.agent-nav-bar { display: flex; align-items: center; gap: 26px; height: 72px; }

.agent-nav-brand { flex: none; display: flex; align-items: center; text-decoration: none; }
.agent-nav-brand .header-logo { display: block; line-height: 0; }
.agent-nav-brand svg { display: block; }

.agent-nav-spacer { flex: 1 1 auto; min-width: 0; }

/* --- on-page anchors: a rule marks the section you are in ---------------- */

.agent-nav-anchors { position: relative; flex: none; display: flex; align-items: center; gap: 22px; align-self: stretch; }

.agent-nav-anchor {
  display: flex;
  align-items: center;
  align-self: stretch;
  text-decoration: none;
  color: var(--ink-50);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: color .22s ease;
}

.agent-nav-anchor:hover { color: var(--ink-80); }
.agent-nav-anchor.is-current { color: #fff; }

/* One rule slides between items rather than five marks blinking on and off. */
.agent-nav-ink {
  position: absolute;
  left: 0;
  /* The anchors stretch the full bar height, so this is measured from the bar's
     bottom edge and lands a few pixels under the text. */
  bottom: 22px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background-color: var(--text-blue);
  opacity: 0;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1),
              width .34s cubic-bezier(.22, 1, .36, 1),
              opacity .25s ease;
  pointer-events: none;
}

.agent-nav-ink.is-on { opacity: 1; }

/* --- site links: plain text --------------------------------------------- */

.agent-nav-site { flex: none; display: flex; align-items: center; gap: 24px; }

.agent-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-70);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s ease;
}

.agent-nav-link:hover { color: #fff; }
.agent-nav-dd-toggle svg { width: 12px; height: 12px; transition: transform .25s ease; }
.agent-nav-dd:hover .agent-nav-dd-toggle svg,
.agent-nav-dd.is-open .agent-nav-dd-toggle svg { transform: rotate(180deg); }
.agent-nav-dd:hover .agent-nav-dd-toggle,
.agent-nav-dd.is-open .agent-nav-dd-toggle { color: #fff; }

.agent-nav-dd { position: relative; display: flex; align-items: center; }

.agent-nav-dd-panel {
  position: absolute;
  top: calc(100% + 18px);
  left: -20px;
  min-width: 460px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background-color: rgba(8, 10, 16, .97);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1), visibility .22s;
}

/* Hover opens it too, so the menu still works if the script never runs. */
.agent-nav-dd:hover .agent-nav-dd-panel,
.agent-nav-dd.is-open .agent-nav-dd-panel { opacity: 1; visibility: visible; transform: none; }

.agent-nav-dd-rule { background-color: var(--hairline); }

.agent-nav-dd-title {
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-50);
}

.agent-nav-dd-link {
  display: block;
  padding: 7px 0;
  font-size: 13px;
  color: var(--ink-80);
  text-decoration: none;
  transition: color .2s ease;
}

.agent-nav-dd-link:hover { color: #fff; }
.agent-nav-dd-link.is-current { color: var(--text-blue); }

.agent-nav-cta { flex: none; }

/* --- burger + sheet ------------------------------------------------------ */

/* Hidden until the script runs: without JS it would open nothing. */
.agent-nav-burger { display: none; }

.agent-nav-sheet {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  padding: 0 0 18px;
  background-color: rgba(8, 10, 16, .98);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .1), 0 24px 60px rgba(0, 0, 0, .6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .26s ease, transform .26s cubic-bezier(.22, 1, .36, 1), visibility .26s;
}

.agent-nav-sheet.is-open { opacity: 1; visibility: visible; transform: none; }

.agent-nav-sheet-title {
  padding: 16px 0 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-50);
}

.agent-nav-sheet-link {
  display: block;
  padding: 11px 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-80);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.agent-nav-sheet-link:last-of-type { border-bottom: 0; }
.agent-nav-sheet-link.is-anchor { color: #fff; }
.agent-nav-sheet-cta { margin-top: 18px; justify-content: center; }

@media screen and (max-width: 1150px) {
  .agent-nav-bar { gap: 18px; }
  .agent-nav-anchors { gap: 16px; }
  .agent-nav-anchor { font-size: 12.5px; }
  .agent-nav-site { gap: 18px; }
}

@media screen and (max-width: 991px) {
  .agent-nav-bar { height: 64px; }
  .agent-nav-anchors,
  .agent-nav-site,
  .agent-nav-cta { display: none; }
  .agent-nav-spacer { flex: 1; }
  html.agent-motion .agent-nav-burger {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--hairline);
    background-color: var(--surface-1);
    cursor: pointer;
  }
  .agent-nav-burger span { display: block; width: 16px; height: 1.5px; border-radius: 2px; background-color: #fff; position: relative; transition: background-color .2s ease; }
  .agent-nav-burger span::before,
  .agent-nav-burger span::after { content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; border-radius: 2px; background-color: #fff; transition: transform .28s ease; }
  .agent-nav-burger span::before { top: -5px; }
  .agent-nav-burger span::after  { top: 5px; }
  .agent-nav-burger.is-open span { background-color: transparent; }
  .agent-nav-burger.is-open span::before { transform: translateY(5px) rotate(45deg); }
  .agent-nav-burger.is-open span::after  { transform: translateY(-5px) rotate(-45deg); }
  /* NOTE: no background or backdrop-filter on .agent-nav itself at any
     breakpoint — that would make it the containing block for the fixed sheet.
     The fill lives on .agent-nav::before. */
}

@media (prefers-reduced-motion: reduce) {
  .agent-nav, .agent-nav-ink, .agent-nav-sheet, .agent-nav-dd-panel { transition: none; }
}

/* ==========================================================================
   Book a Demo popup — Figma 1939:6122
   --------------------------------------------------------------------------
   A light panel on a dark page, so everything here sets its own colours rather
   than inheriting the page's. Values are the design's: 24px card radius, 32px
   padding and gap, a 479px option column beside a 450x600 art panel.
   ========================================================================== */

.agent-demo {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

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

.agent-demo-scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(4, 6, 12, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .28s ease;
}

.agent-demo.is-open .agent-demo-scrim { opacity: 1; }

.agent-demo-card {
  position: relative;
  display: flex;
  gap: 32px;
  width: 100%;
  max-width: 1065px;
  max-height: calc(100vh - 48px);
  padding: 32px;
  border-radius: 24px;
  background-color: #fff;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: translateY(12px) scale(.985);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
  overflow: hidden;
}

.agent-demo.is-open .agent-demo-card { opacity: 1; transform: none; }

.agent-demo-form {
  flex: 1 1 0;
  min-width: 0;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}

.agent-demo-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.agent-demo-mark { display: block; }

.agent-demo-title {
  margin: 0;
  font-size: 36px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -.9px;
  color: #282828;
}

.agent-demo-sub { margin: 0; font-size: 20px; line-height: 28px; font-weight: 400; color: #4b596d; }

.agent-demo-options { display: flex; flex-direction: column; gap: 8px; max-width: 479px; }

/* The label is the control: the whole pill is the hit target and the browser
   does single-select and arrow-key navigation for free. */
.agent-demo-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background-color: #fff;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}

.agent-demo-option:hover { border-color: #c9d2e0; }

/* Visually hidden, but still focusable and still the thing being checked. */
.agent-demo-input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.agent-demo-option:has(.agent-demo-input:checked) { background-color: #e8f6f0; border-color: #19a66a; }
.agent-demo-option:has(.agent-demo-input:focus-visible) { outline: 2px solid #215fff; outline-offset: 2px; }

.agent-demo-ic {
  flex: none;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  color: #3b5bfa;
}

.agent-demo-ic svg { display: block; }

.agent-demo-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  color: #111b31;
}

.agent-demo-mark-slot { position: relative; flex: none; width: 32px; height: 32px; display: grid; place-items: center; }
.agent-demo-mark-slot svg { grid-area: 1 / 1; width: 26px; height: 26px; display: block; transition: opacity .2s ease, transform .2s ease; }
.agent-demo-dot { color: #9ea8b8; }
.agent-demo-tick { color: #1b7e43; opacity: 0; transform: scale(.6); }
.agent-demo-option:has(.agent-demo-input:checked) .agent-demo-dot { opacity: 0; }
.agent-demo-option:has(.agent-demo-input:checked) .agent-demo-tick { opacity: 1; transform: none; }

/* Without :has() every pill still works — it just doesn't recolour. The tick
   class is set by the script as well, so the state is never invisible. */
.agent-demo-option.is-picked { background-color: #e8f6f0; border-color: #19a66a; }
.agent-demo-option.is-picked .agent-demo-dot { opacity: 0; }
.agent-demo-option.is-picked .agent-demo-tick { opacity: 1; transform: none; }

.agent-demo-actions { display: flex; align-items: center; gap: 16px; }

.agent-demo-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 186px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background-color: #215fff;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease;
}

.agent-demo-go:hover:not(:disabled) { background-color: #1a51e0; }
.agent-demo-go:disabled { opacity: .4; cursor: not-allowed; }

.agent-demo-cancel {
  padding: 12px 16px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #9ea8b8;
  cursor: pointer;
  transition: color .2s ease;
}

.agent-demo-cancel:hover { color: #4b596d; }

.agent-demo-art {
  flex: none;
  width: 450px;
  height: 600px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .2);
}

.agent-demo-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* ---- narrower ----------------------------------------------------------- */

@media screen and (max-width: 1080px) {
  .agent-demo-art { width: 360px; }
  .agent-demo-title { font-size: 30px; line-height: 36px; letter-spacing: -.6px; }
  .agent-demo-sub { font-size: 17px; line-height: 24px; }
  .agent-demo-label { font-size: 17px; line-height: 24px; }
}

@media screen and (max-width: 860px) {
  .agent-demo { padding: 0; align-items: stretch; }

  .agent-demo-card {
    flex-direction: column;
    gap: 0;
    padding: 0;
    max-width: none;
    max-height: none;
    height: 100%;
    border-radius: 0;
    overflow-y: auto;
  }

  /* The art becomes a banner. It is a full-bleed illustration, so it runs to
     all three edges of the panel rather than stopping short of them. */
  .agent-demo-art {
    order: -1;
    width: auto;
    height: 168px;
    border: 0;
    border-radius: 0;
    margin: 0;
  }

  .agent-demo-art img { object-position: 50% 26%; }

  .agent-demo-form { min-height: 0; padding: 24px 20px 28px; gap: 24px; }
  .agent-demo-title { font-size: 26px; line-height: 32px; letter-spacing: -.4px; }
  .agent-demo-sub { font-size: 15px; line-height: 22px; }
  .agent-demo-head { gap: 12px; }
  .agent-demo-mark { width: 30px; height: 33px; }
  .agent-demo-options { max-width: none; }
  .agent-demo-option { padding: 13px 14px; }
  .agent-demo-label { font-size: 15.5px; line-height: 22px; }
  .agent-demo-mark-slot { width: 26px; height: 26px; }
  .agent-demo-mark-slot svg { width: 22px; height: 22px; }
  .agent-demo-actions { gap: 8px; }
  .agent-demo-go { flex: 1 1 auto; width: auto; padding: 14px 16px; }
  .agent-demo-card { transform: none; }
}

@media screen and (max-width: 380px) {
  .agent-demo-label { font-size: 14.5px; }
  .agent-demo-art { height: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .agent-demo-scrim, .agent-demo-card, .agent-demo-mark-slot svg { transition: none; }
}

/* ==========================================================================
   Mobile corrections
   ========================================================================== */

@media screen and (max-width: 767px) {

  /* --- display type -------------------------------------------------------
     The desktop scale (30px sub-title over a 50px heading) was never reduced
     here, so "No limits on coverage." wrapped onto three enormous lines and
     dwarfed everything under it. */
  .section-sub-title { font-size: 21px; line-height: 1.22; margin-bottom: 2px; }
  .heading-6xl { font-size: 30px; line-height: 1.16; }
  .section-summary { font-size: 13.5px; line-height: 20px; max-width: 42ch; }
  .agent-capability-title { font-size: 22px; line-height: 28px; }
  .agent-coverage-title { font-size: 19px; line-height: 25px; }
  .agent-step-title { font-size: 20px; line-height: 27px; }
  .agent-channel-title { font-size: 20px; line-height: 27px; }
  .agent-mini-title { font-size: 17px; line-height: 24px; }

  /* Section head to first content, cut ~30% (34px -> 24px). */
  .agent-section-head { margin-bottom: 24px; }
  .section-content-wrap { grid-row-gap: 14px; }

  /* --- the language card was the tallest thing on the page --------------- */
  /* Three columns, not two: twelve tiles in two columns made this card twice
     the height of the one beside it. */
  .agent-lang-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
  .agent-lang-tile { padding: 6px 5px; }
  .agent-lang-native { font-size: 13px; line-height: 1.35; }
  .agent-lang-latin { font-size: 9.5px; line-height: 1.2; margin-top: 1px; }
  .agent-coverage-card { padding: 18px; }
  .agent-coverage-note { padding-top: 16px; font-size: 12.5px; line-height: 18px; }
  html.agent-motion .agent-say { margin-top: 14px; padding-top: 12px; min-height: 0; }
}

/* ==========================================================================
   Navbar — mobile corrections
   ========================================================================== */

@media screen and (max-width: 991px) {

  /* The bar is transparent over the hero here too. It used to keep its fill at
     this width, which put a hard band across the top of the hero image. */
  html.agent-motion .agent-nav::before { opacity: 0; }
  html.agent-motion .agent-nav.is-scrolled::before { opacity: 1; }

  /* --- the sheet is a full-screen menu ----------------------------------
     The anchors are gone from it: on a phone the page is one column and
     scrolling to a section is no faster than scrolling to it. What is left is
     navigation proper, with the CTA pinned so it never scrolls out of reach. */
  .agent-nav-sheet {
    position: fixed;
    top: 64px;
    bottom: 0;
    max-height: none;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .agent-nav-sheet-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
  }

  /* Rows read as tappable because they carry the same chevron the iOS
     Settings list uses. */
  .agent-nav-sheet-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 0;
  }

  .agent-nav-sheet-link::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 3px;
    border-right: 1.75px solid rgba(255, 255, 255, .35);
    border-bottom: 1.75px solid rgba(255, 255, 255, .35);
    transform: rotate(-45deg);
  }

  /* Pinned, so the one action a visitor is most likely to want never scrolls
     out of reach. The list above scrolls under it. */
  .agent-nav-sheet-foot {
    flex: none;
    padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
    background-color: rgba(8, 10, 16, .98);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  }

  .agent-nav-sheet-cta {
    display: flex;
    width: 100%;
    margin: 0;
    justify-content: center;
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

/* ==========================================================================
   Navbar CTA — a size down from the page's buttons
   ==========================================================================
   The bar is 72px tall; the page's standard button fills too much of it. */

.agent-nav-cta { padding: 9px 15px; font-size: 13px; line-height: 18px; }
.agent-nav-cta .button-arrow svg { width: 15px; height: 15px; }

/* ==========================================================================
   Mobile hero — close the gap under the bar
   --------------------------------------------------------------------------
   The 176px top padding was sized for the tablet layout and never reduced, so
   on a phone the badges started a long way below a 64px bar.
   ========================================================================== */

@media screen and (max-width: 767px) {
  .agent-hero { padding-top: 96px; }
}

@media screen and (max-width: 479px) {
  .agent-hero { padding-top: 88px; }
}

/* ==========================================================================
   "New" badge — nav dropdown, mobile sheet and footer product lists
   ========================================================================== */

.agent-new {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  background-color: var(--primary-600);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* In the mobile sheet the chevron is pushed to the far right, so the badge has
   to stay glued to the label rather than being spaced apart by the flex gap. */
.agent-nav-sheet-link .agent-new { margin-right: auto; }

/* ==========================================================================
   Footer — utility row, and the app-store buttons removed
   ========================================================================== */

/* The two store badges are gone from the markup; this also covers the Webflow
   footer, where the block is a native element rather than one of ours. */
.footer .footer-button-wrap { display: none !important; }

.footer .footer-info-column { display: flex; flex-direction: column; justify-content: center; height: 100%; }

/* Sits directly under the lockup and strapline, where the app-store buttons
   used to be — not in the bottom bar. */
.agent-footer-utils {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.agent-footer-home,
.agent-footer-top {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 18px;
  color: var(--ink-70);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.agent-footer-home:hover,
.agent-footer-top:hover {
  color: #fff;
  border-color: var(--hairline-strong);
  background-color: var(--surface-1);
}

.agent-footer-home svg,
.agent-footer-top svg { flex: none; display: block; }

@media screen and (max-width: 767px) {
  .agent-footer-utils { width: 100%; gap: 10px; }
  .agent-footer-home, .agent-footer-top { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   Core capabilities — keep the snippet off the card's right edge
   ========================================================================== */

/* The panel is full-bleed to the card edge; the plate inside now stops short
   of it so the UI never touches the border. */
@media screen and (min-width: 992px) {
  /* width:100% on .agent-snip beats a `right` offset, so it has to be cleared
     or the plate stays flush against the card's edge. */
  .agent-capability-visual .agent-snip { inset: 0 28px 0 0; width: auto; }
}

/* ==========================================================================
   Mobile menu — open state
   ========================================================================== */

@media screen and (max-width: 991px) {
  /* The sheet starts below the bar, so without this the logo and close button
     sit on a transparent strip with the page showing through behind them. */
  html.agent-motion .agent-nav.is-menu-open::before {
    opacity: 1;
    --nav-fill: rgba(8, 10, 16, .98);
    box-shadow: none;
  }

  .agent-nav-sheet-link { font-size: 16.5px; line-height: 24px; }
  .agent-nav-sheet-title { font-size: 11px; }
}

/* ==========================================================================
   "All of Eka Care" — the way back to the rest of the site
   ========================================================================== */

/* Spans both columns of the dropdown grid and sits under a rule, so it reads
   as a way out of the menu rather than a fifth product. */
.agent-nav-dd-all {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-70);
  text-decoration: none;
  transition: color .2s ease;
}

.agent-nav-dd-all:hover { color: #fff; }
.agent-nav-dd-all svg { flex: none; display: block; transition: transform .22s cubic-bezier(.22, 1, .36, 1); }
.agent-nav-dd-all:hover svg { transform: translateX(3px); }

.agent-nav-sheet-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 15px 0 0;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-70);
  text-decoration: none;
}

.agent-nav-sheet-all svg { flex: none; display: block; }

/* ==========================================================================
   Footer on mobile — sized for thumbs
   --------------------------------------------------------------------------
   Every rule here is scoped to .footer and lives in this page's own bundle,
   which only the EkaAgents page loads. Home is untouched.

   The link rows are deliberately identical to the mobile nav sheet's:
   16.5px label, 15px of vertical padding, a hairline under each row and the
   same iOS-style chevron — so the two menus feel like one system. That takes a
   tap target from 18px to ~55px, comfortably past the 44px minimum.
   ========================================================================== */

@media screen and (max-width: 767px) {

  /* One column. At 16.5px the long product names wrap three times in a
     half-width column, which is what made them unreadable as well as small. */
  .footer .footer-top-wrap,
  .footer .footer-info-grid { display: flex; flex-direction: column; gap: 0; }

  .footer .footer-column { width: 100%; }
  .footer .footer-menu-list { display: flex; flex-direction: column; }

  .footer .footer-menu-title {
    padding: 22px 0 4px;
    font-size: 11px;
    line-height: 16.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .footer .footer-menu-title strong { font-weight: 600; }

  .footer .footer-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: 16.5px;
    line-height: 24px;
    font-weight: 500;
    color: var(--ink-80);
  }

  .footer .footer-menu-link:last-child { border-bottom: 0; }

  .footer .footer-menu-link::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 3px;
    border-right: 1.75px solid rgba(255, 255, 255, .35);
    border-bottom: 1.75px solid rgba(255, 255, 255, .35);
    transform: rotate(-45deg);
  }

  /* The badge must stay next to the label, not get pushed out by the chevron. */
  .footer .footer-menu-link .agent-new,
  .footer .footer-menu-link .w-embed { margin-right: auto; }

  /* --- the brand block ------------------------------------------------- */

  .footer .footer-left-box { width: 100%; }
  .footer .footer-info-column { height: auto; }
  .footer .footer-info-top { padding-top: 8px; }
  .footer .footer-summary { margin-top: 12px; font-size: 14px; line-height: 21px; }
  .footer .footer-divider { display: none; }

  /* Full-width, same height as a menu row. */
  .agent-footer-utils { margin-top: 20px; gap: 10px; }

  .agent-footer-home,
  .agent-footer-top {
    flex: 1 1 100%;
    justify-content: center;
    padding: 15px 18px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 22px;
  }

  /* --- the legal tail --------------------------------------------------- */

  .footer .footer-note { margin-top: 24px; font-size: 12.5px; line-height: 19px; }

  .footer .footer-bottom-wrap { gap: 4px; padding-top: 8px; }

  /* .footer-bottom-wrap is a centring flex column, so the list and its rows
     both have to be told to stretch or they shrink to their text. */
  .footer .footer-bottom-wrap { align-items: stretch; }
  .footer .legal-list { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
  .footer .legal-list a { width: 100%; }
  .footer .social-media-list { justify-content: flex-start; }
  .footer .copyright-list { width: 100%; }

  .footer .legal-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: 15px;
    line-height: 22px;
    color: var(--ink-70);
  }

  .footer .legal-list a:last-child { border-bottom: 0; }

  .footer .legal-list a::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-right: 3px;
    border-right: 1.6px solid rgba(255, 255, 255, .3);
    border-bottom: 1.6px solid rgba(255, 255, 255, .3);
    transform: rotate(-45deg);
  }

  /* 44px touch targets, spaced so neighbouring icons are not mis-tapped. */
  .footer .social-media-list { gap: 8px; margin: 18px 0 6px; }

  .footer .social-media-link {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--hairline);
    border-radius: 12px;
  }

  .footer .copyright-text { font-size: 13px; line-height: 20px; }
}

/* ==========================================================================
   Body copy — one weight lighter, and balanced wrapping
   --------------------------------------------------------------------------
   Inter 300 is already in the page's webfont request (300,400,500,600,700), so
   this costs no extra download. Headings, labels, buttons and nav keep their
   weights — only running copy gets lighter.
   ========================================================================== */

.agent-hero-sub,
.agent-hero-point,
.section-summary,
.agent-channel-body,
.agent-capability-body,
.agent-feature p,
.agent-step-body,
.agent-mini-body,
.agent-coverage-sub,
.agent-coverage-note,
.agent-flow-body,
.agent-stat-label,
.agent-stat-lead-label,
.agent-stat-lead-note,
.agent-say-text,
.footer .footer-summary,
.cta-section .section-summary { font-weight: 300; }

/* The one exception: the smallest copy on a dark surface. Inter 300 below
   ~13px on near-black goes muddy, so these hold at 400. */
.agent-flow-body,
.agent-lang-latin,
.agent-step-tag { font-weight: 400; }

/* ---- balanced wrapping -------------------------------------------------
   Short runs get even line lengths instead of a long first line and an
   orphan. The engine skips paragraphs past a few lines, so applying it
   broadly is safe — long copy simply wraps normally. */

.agent-hero-title,
.agent-hero-sub,
.agent-hero-point span,
.section-sub-title,
.heading-6xl,
.section-summary,
.agent-channel-title,
.agent-channel-body,
.agent-capability-title,
.agent-feature p,
.agent-step-title,
.agent-step-body,
.agent-mini-title,
.agent-mini-body,
.agent-coverage-title,
.agent-coverage-sub,
.agent-coverage-note,
.agent-flow-title,
.agent-flow-body,
.agent-stat-lead-label,
.agent-stat-lead-note,
.agent-stat-label,
.agent-say-text,
.agent-demo-title,
.agent-demo-sub,
.agent-demo-label,
.cta-section .section-summary,
.cta-badge { text-wrap: balance; }

/* ==========================================================================
   Round 13
   --------------------------------------------------------------------------
   1. hero type hierarchy    2. mobile eyebrow scale     3. no hover on touch
   4. journey as a mobile carousel                       5. popup on short phones
   6. mobile footer order    7. animated background mesh
   ========================================================================== */

/* --- 1. hero: the lead sentence now leads -------------------------------
   It was 15.12px against 16.56px bullets — smaller than the list it
   introduces. 20px/300 over 12.5px bullets restores the order. */

.agent-hero-sub { font-size: 20px; line-height: 1.5; }
.agent-hero-point { font-size: 12.5px; line-height: 1.6; }
.agent-hero-point svg { width: 15px; height: 15px; margin-top: 3px; }

@media screen and (max-width: 767px) {
  .agent-hero-sub { font-size: 17px; line-height: 1.5; }
  .agent-hero-point { font-size: 12.5px; line-height: 1.55; }
  .agent-hero-point svg { width: 14px; height: 14px; margin-top: 3px; }
}

/* --- 2. the eyebrow badge follows the headings down --------------------
   Headings were scaled for mobile but the badge above them was not, so the
   eyebrow read as large as the sub-title. Scoped to section heads: the
   `.section-tag` pills inside the capability cards are content, not eyebrows. */

@media screen and (max-width: 767px) {
  .agent-section-head .section-tag,
  .agent-hero .section-tag {
    font-size: 10.5px;
    line-height: 1.5;
    padding: 2px 7px;
    border-radius: 6px;
    letter-spacing: .09em;
  }
  .cta-badge { font-size: 10.5px; line-height: 1.5; padding: 2px 7px; }
}

/* --- 3. no hover states on touch ---------------------------------------
   A tap on a touch device leaves the hover state stuck until the next tap
   elsewhere. Every hover in this stylesheet is reverted where there is no
   real pointer; focus-visible still works for keyboards. */

@media (hover: none) {
  .agent-channel-card:hover,
  .agent-capability-row:hover {
    border-color: var(--hairline);
    background-color: rgba(255, 255, 255, .04);
    box-shadow: none;
    transform: none;
  }

  .agent-lang-tile:hover,
  .agent-spec-chip:hover {
    background-color: rgba(255, 255, 255, .04);
    border-color: var(--hairline);
  }

  .agent-lang-tile:hover::after,
  .agent-spec-chip:hover::after { animation: none; }

  .agent-nav-anchor:hover { color: inherit; }
  .agent-nav-link:hover { color: var(--ink-70); }
  .agent-nav-dd-link:hover { color: var(--ink-70); }
  .agent-nav-dd-all:hover { color: var(--ink-70); }
  .agent-nav-dd-all:hover svg { transform: none; }
  .agent-nav-dd:hover .agent-nav-dd-panel { opacity: 0; visibility: hidden; pointer-events: none; }
  .agent-nav-dd.is-open .agent-nav-dd-panel { opacity: 1; visibility: visible; pointer-events: auto; }

  .agent-footer-home:hover,
  .agent-footer-top:hover {
    color: var(--ink-70);
    border-color: var(--hairline);
    background-color: transparent;
  }

  .agent-demo-option:hover { border-color: #dfe5ee; }
  .agent-demo-go:hover:not(:disabled) { background-color: #215fff; }
  .agent-demo-cancel:hover { color: #6b7688; }
}

/* --- 4. "See it in action" is a carousel on a phone --------------------
   Five stacked cards made this the longest section on the page. Horizontal
   now, with the cards at their desktop proportions and the second one ~26%
   visible so the gesture is discoverable. The track bleeds to both edges of
   the viewport rather than stopping at the container's padding. */

@media screen and (max-width: 767px) {
  .agent-flow {
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--flow-bleed, 20px));
    padding-inline: var(--flow-bleed, 20px);
    padding-bottom: 4px;
    cursor: grab;
  }

  .agent-flow::-webkit-scrollbar { display: none; }
  .agent-flow.is-dragging { cursor: grabbing; scroll-snap-type: none; }

  .agent-flow-step {
    flex: 0 0 82%;
    max-width: 320px;
    min-height: 244px;
    scroll-snap-align: start;
    padding: 12px 16px 16px;
  }

  /* Desktop proportions inside the card. */
  .agent-flow-top { height: 96px; }
  .agent-flow-icon { width: 80px; height: 80px; }
  .agent-flow-body { min-height: 0; }
  .agent-flow-link { display: none; }

  /* The track ends flush with the right edge instead of against a half card. */
  .agent-flow::after { content: ""; flex: 0 0 1px; }
}

/* --- 5. the popup on short phones -------------------------------------
   The actions sat at the end of a scrolling column, so on a 667px-tall
   screen the button rested on the very bottom edge. The sheet is now a
   fixed-height flex column: the options scroll, the actions are pinned
   above the home indicator, and the artwork drops out when there is not
   enough height to justify it. */

@media screen and (max-width: 860px) {
  .agent-demo-card { height: 100dvh; max-height: 100dvh; overflow: hidden; }

  .agent-demo-form {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 20px 20px 0;
    gap: 18px;
  }

  .agent-demo-options {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .agent-demo-actions {
    flex: none;
    margin-inline: -20px;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    background-color: #fff;
    box-shadow: 0 -1px 0 rgba(15, 23, 42, .08);
  }
}

/* Under ~740px of height the banner is the first thing to go: the four
   options and the button matter more than the illustration. */
@media screen and (max-width: 860px) and (max-height: 740px) {
  .agent-demo-art { display: none; }
  .agent-demo-title { font-size: 23px; line-height: 29px; }
  .agent-demo-sub { font-size: 14px; line-height: 20px; }
  .agent-demo-form { padding-top: 16px; gap: 14px; }
  .agent-demo-option { padding: 11px 13px; }
}

@media screen and (max-width: 860px) and (max-height: 620px) {
  .agent-demo-head { gap: 8px; }
  .agent-demo-sub { display: none; }
  .agent-demo-mark { width: 26px; height: 29px; }
}

/* --- 6. mobile footer order -------------------------------------------
   The brand card leads, every link list follows, and the "Book a Demo" card
   closes — with real space above it instead of butting against the last
   product row. `display: contents` flattens the two wrappers so all of these
   are siblings and `order` can reach them. */

@media screen and (max-width: 767px) {
  .footer .container { display: flex; flex-direction: column; }
  .footer .footer-middle-wrap,
  .footer .footer-info-grid,
  .footer .footer-left-box { display: contents; }

  .footer .footer-info-column { order: 1; }
  .footer .footer-left-box > .footer-column { order: 2; }
  .footer .footer-top-wrap { order: 3; }
  .footer .footer-right-box { order: 4; margin-top: 36px; }
  .footer .footer-note { order: 5; }
  .footer .footer-bottom-wrap { order: 6; }

  /* The brand block reads as a card, matching the nav sheet's surfaces. */
  .footer .footer-info-column {
    padding: 20px 18px 22px;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    background-color: rgba(255, 255, 255, .03);
    margin-bottom: 4px;
  }

  .footer .footer-info-top { padding-top: 0; }
  .agent-footer-utils { margin-top: 18px; flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   Aurora sweep — the page background
   --------------------------------------------------------------------------
   One fixed layer behind everything: a 170vmax conic gradient rotating once a
   minute, blurred, under a vignette that returns the edges to black so the
   hero and the section heads keep their contrast. Both pseudo-elements, so
   the markup is an empty div — one embed in Webflow.

   It animates `transform` only, which stays on the compositor: no repaint per
   frame, and it never touches layout. The layer is `pointer-events: none` and
   sits at z-index -1, behind the page's content but above the body's fill.
   ========================================================================== */

.agent-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.agent-bg::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -40%;
  width: 170vmax;
  height: 170vmax;
  margin-left: -85vmax;
  background: conic-gradient(from 0deg,
    rgba(10, 20, 70, 0) 0deg,
    rgba(37, 78, 214, .55) 55deg,
    rgba(10, 20, 70, 0) 120deg,
    rgba(90, 60, 220, .4) 190deg,
    rgba(10, 20, 70, 0) 250deg,
    rgba(30, 90, 230, .5) 310deg,
    rgba(10, 20, 70, 0) 360deg);
  filter: blur(70px);
  opacity: .72;
  will-change: transform;
  animation: agent-aurora 60s linear infinite;
}

/* The vignette. Without it the sweep washes out the top of the hero and the
   white display type loses its edge. */
.agent-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 70% at 50% 0%,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .48) 58%, #000 100%);
}

@keyframes agent-aurora { to { transform: rotate(360deg); } }

/* Negative z, so the layer paints between the body's background and the
   page's content without a rule that would clobber the navbar's and the
   popup's own stacking order. */

/* Phones carry the blur cost; a smaller radius and a slower turn keep it
   free, and the sweep is still legible at that size. */
@media screen and (max-width: 767px) {
  .agent-bg::before { filter: blur(50px); animation-duration: 90s; opacity: .5; }
}

/* Stops with everything else: the reduced-motion preference and the page's
   own low-performance fallback both freeze the sweep. The colour stays. */
@media (prefers-reduced-motion: reduce) {
  .agent-bg::before { animation: none; }
}

html.agent-lite .agent-bg::before { animation: none; }

/* ==== css/agent-hero-anim.css ==== */
/* ==========================================================================
   Hero animation — three acts (booking, capabilities, voice)

   Authored at 497x493 inside .hero-anim-inner; js/agent-hero-anim.js measures
   the wrapper and sets --ha-scale, so the same markup works in the page hero
   and in the smaller review squares without re-tuning any value.
   ========================================================================== */

.hero-anim {
  position: relative;
  /* Authored size lives in these two variables. Everything inside is laid out
     at that size and scaled to the container, so switching to the taller
     mobile layout is a matter of changing the pair — see the media query at
     the foot of this file. js/agent-hero-anim.js reads --ha-base-w. */
  --ha-base-w: 360;
  --ha-base-h: 360;
  aspect-ratio: var(--ha-base-w) / var(--ha-base-h);
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #242a3b;
  background: #0b0f1a;
  /* Set explicitly — otherwise unstyled labels inherit the page's muted
     body colour and the semibold text reads washed out. */
  color: #fff;

  --ha-blue: #2f6bff;
  --ha-blue-text: #4a7dff;
  --ha-bubble-bot: #171c2b;
  --ha-card: #141a28;
  --ha-line: #242a3b;
  --ha-field: #1a2030;
  --ha-mut: #8b93a7;
  --ha-dim: #6b7280;
  --ha-green: #22c55e;
  --ha-green-text: #4ade80;
  --ha-scale: 1;
}

.hero-anim-inner {
  width: calc(var(--ha-base-w) * 1px);
  height: calc(var(--ha-base-h) * 1px);
  transform-origin: top left;
  transform: scale(var(--ha-scale));
  position: relative;
}

/* ---- widget header (act 1 only) --------------------------------------- */

.ha-head {
  position: absolute; left: 0; right: 0; top: 0; z-index: 4;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ha-line);
  background: rgba(11, 15, 26, .94);
  opacity: 0;
  transition: opacity .45s ease;
}
.hero-anim[data-act="1"] .ha-head { opacity: 1; }

.ha-avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--ha-blue); display: grid; place-items: center; color: #fff; }
.ha-avatar svg, .ha-avatar img { width: 16px; height: 17px; display: block; }

.ha-hname { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
.ha-hsub { font-size: 10px; color: var(--ha-mut); display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.ha-hsub i { width: 5px; height: 5px; border-radius: 50%; background: var(--ha-green); display: block; }

/* ---- scenes ------------------------------------------------------------ */

.ha-scene {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .55s ease, visibility .55s;
}
.ha-scene.on { opacity: 1; visibility: visible; }

/* Act 1 sits under the header; acts 2 and 3 use the whole square, centred. */
/* Bottom padding clears the composer. Side padding is 16px, and the stack now
   starts the same 16px below the header so the first message is inset evenly
   from the header and the right edge. */
.ha-scene.is-chat { top: 55px; padding: 0 16px 92px; }
.ha-stack { top: 16px; }
.ha-scene.is-centred { display: flex; align-items: center; justify-content: center; padding: 26px; }

/* ---- act 1: conversation ---------------------------------------------- */

.ha-stack {
  position: absolute; left: 16px; right: 16px; top: 16px;
  display: flex; flex-direction: column; gap: 9px;
  transition: transform .75s cubic-bezier(.22, 1, .36, 1);
}

/* A step is out of flow until its beat, so the column has no gaps waiting to
   be filled. The appearance itself is a fade-up on the bubble, and the column's
   scroll is handled by the measured reflow in js/agent-hero-anim.js — that
   pairing is what removed the jumps, not animating the step's own height.

   (A 0fr -> 1fr grid row was tried here first. It does not size to content when
   the step is also a flex item, which collapsed the carousel to zero height.) */
.ha-step { display: none; }
.ha-step.on { display: flex; }
.ha-step.right { justify-content: flex-end; }

.ha-step.on > * {
  animation: ha-pop .52s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes ha-pop {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}

.ha-bub { max-width: 86%; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; line-height: 17px; }
.ha-bub.bot { background: var(--ha-bubble-bot); border: 1px solid rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .88); }
.ha-bub.me { background: var(--ha-blue); color: #fff; }

.ha-typing { display: flex; gap: 4px; padding: 11px 13px; background: var(--ha-bubble-bot); border: 1px solid rgba(255, 255, 255, .06); border-radius: 8px; }
.ha-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ha-dim); animation: ha-bounce 1.1s ease-in-out infinite; }
.ha-typing i:nth-child(2) { animation-delay: .15s; }
.ha-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ha-bounce { 0%, 100% { transform: none; opacity: .45 } 50% { transform: translateY(-3px); opacity: 1 } }

.ha-card { width: 100%; border: 1px solid var(--ha-line); border-radius: 8px; background: var(--ha-card); overflow: hidden; }
.ha-pad { padding: 11px 12px; }
.ha-sep { height: 1px; background: var(--ha-line); }

.ha-doc { display: flex; gap: 10px; align-items: center; }
.ha-tile { width: 40px; height: 40px; flex: none; border-radius: 10px; background: #1e2a4a; color: #7aa2ff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.ha-name { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
.ha-sub { font-size: 10.5px; color: var(--ha-mut); margin-top: 1px; }
.ha-link { font-size: 10.5px; color: var(--ha-blue-text); margin-top: 3px; display: block; }

.ha-lbl { font-size: 9px; letter-spacing: .09em; text-transform: uppercase; color: var(--ha-dim); font-weight: 500; }

.ha-dates { display: flex; gap: 5px; margin-top: 7px; }
.ha-day {
  flex: 1 1 0; min-width: 0; text-align: center; padding: 6px 0 5px;
  border: 1px solid var(--ha-line); border-radius: 6px; background: var(--ha-field);
  transition: background-color .35s ease, border-color .35s ease;
}
.ha-day .dn { font-size: 8.5px; color: var(--ha-mut); transition: color .35s ease; }
.ha-day .dd { font-size: 12px; font-weight: 600; margin-top: 1px; }
.ha-day .dot { width: 3.5px; height: 3.5px; border-radius: 50%; background: var(--ha-green); margin: 3px auto 0; transition: background-color .35s ease; }
.ha-day.off { opacity: .38; }
.ha-day.off .dot { visibility: hidden; }
.ha-day.sel { background: var(--ha-blue); border-color: var(--ha-blue); }
.ha-day.sel .dn { color: rgba(255, 255, 255, .75); }
.ha-day.sel .dot { background: rgba(255, 255, 255, .55); }

/* The slots block is collapsed until a date is chosen — grid 0fr→1fr grows
   the card instead of leaving an empty strip inside it. */
.ha-grow { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.22, 1, .36, 1); }
.ha-grow.on { grid-template-rows: 1fr; }
.ha-grow-in { overflow: hidden; min-height: 0; }

.ha-slots { display: flex; gap: 7px; margin-top: 7px; }
.ha-slot {
  font-size: 11px; padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--ha-line); background: var(--ha-field); color: var(--ha-mut);
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
.ha-slot.gone { color: var(--ha-dim); text-decoration: line-through; opacity: .6; }
.ha-slot.free { color: var(--ha-blue-text); border-color: rgba(74, 125, 255, .45); }
.ha-slot.sel { background: var(--ha-blue); border-color: var(--ha-blue); color: #fff; }

.ha-ok { width: 100%; border: 1px solid rgba(34, 197, 94, .3); background: rgba(34, 197, 94, .09); border-radius: 8px; padding: 11px 12px; }
.ha-ok-h { display: flex; align-items: center; gap: 7px; color: var(--ha-green-text); font-size: 12px; font-weight: 600; }
.ha-ok-h svg { width: 14px; height: 14px; stroke: var(--ha-green-text); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ha-ok-b { font-size: 10.5px; color: var(--ha-mut); margin-top: 5px; line-height: 15px; }

/* Top fade, but only once the stack has actually scrolled — otherwise it sits
   over the very first message. */
.ha-scene.is-chat:before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; z-index: 2;
  background: linear-gradient(180deg, #0b0f1a 18%, rgba(11, 15, 26, 0) 100%);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.ha-scene.is-chat.is-scrolled:before { opacity: 1; }


/* ---- doctor carousel --------------------------------------------------- */

/* The cards run the full width of the animation, not the 16px-inset column:
   negative margins cancel the scene padding and the track carries its own lead
   and trail so a card still lines up with the messages at rest. Nothing is ever
   cut mid-card — it bleeds to the edge instead. */
.ha-carousel {
  overflow: hidden;
  margin-left: -16px;
  margin-right: -16px;
}
.ha-track { padding-left: 16px; padding-right: 16px; }

.ha-track {
  display: flex;
  gap: 10px;
  transition: transform .85s cubic-bezier(.22, 1, .36, 1);
  align-items: flex-start;
}

.ha-doc-card {
  flex: none;
  width: 262px;
  border: 1px solid var(--ha-line);
  border-radius: 8px;
  background: var(--ha-card);
  overflow: hidden;
  transition: border-color .4s ease, opacity .4s ease;
  opacity: .55;
}
.ha-doc-card.is-lit { opacity: 1; }
.ha-doc-card.is-lit.is-focus { border-color: rgba(74, 125, 255, .55); }

.ha-when { font-size: 10.5px; color: var(--ha-green-text); margin-top: 8px; display: flex; align-items: center; gap: 5px; }
.ha-when i { width: 4.5px; height: 4.5px; border-radius: 50%; background: var(--ha-green); display: block; flex: none; }

.ha-tile.t-blue { background: #1e2a4a; color: #7aa2ff; }
.ha-tile.t-green { background: #16331f; color: #4ade80; }
.ha-tile.t-purple { background: #2a1e3d; color: #a78bfa; }


/* ---- act 2: capabilities ---------------------------------------------- */

.ha-caps { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 400px; }
.ha-caps-lbl { margin-bottom: 2px; }

.ha-cap {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 14px; border: 1px solid var(--ha-line); border-radius: 8px; background: var(--ha-card);
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
.ha-cap.on { opacity: 1; transform: none; }
.ha-cap-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; background: rgba(47, 107, 255, .14); display: grid; place-items: center; }
.ha-cap-ic svg { width: 16px; height: 16px; stroke: var(--ha-blue-text); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ha-cap-t { font-size: 12.5px; font-weight: 600; line-height: 17px; }
.ha-cap-b { font-size: 10.5px; color: var(--ha-mut); line-height: 15px; margin-top: 3px; }

/* ---- act 3: voice ------------------------------------------------------ */

.ha-voice { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; }

.ha-vlabel { display: flex; align-items: center; gap: 7px; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ha-blue-text); font-weight: 600; }
.ha-vlabel i { width: 4.5px; height: 4.5px; border-radius: 50%; background: var(--ha-blue-text); display: block; }

.ha-wave { display: flex; align-items: center; justify-content: center; gap: 2.5px; height: 30px; margin: 14px 0 16px; }
.ha-wave i { display: block; width: 3px; border-radius: 2px; background: var(--ha-blue-text); height: 5px; }
.ha-wave.on i { animation: ha-bar 1.2s ease-in-out infinite; }
@keyframes ha-bar { 0%, 100% { height: 5px; opacity: .45 } 50% { height: 24px; opacity: 1 } }

.ha-vmsgs { display: flex; flex-direction: column; gap: 9px; width: 100%; }

/* No avatar or mic chips here — just the messages. */
.ha-vrow { display: flex; opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .55s cubic-bezier(.22, 1, .36, 1); }
.ha-vrow.on { opacity: 1; transform: none; }
.ha-vrow.right { justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) {
  .ha-step, .ha-cap, .ha-vrow { opacity: 1; transform: none; }
  .ha-stack, .ha-grow, .ha-scene, .ha-head { transition: none; }
  .ha-wave.on i, .ha-typing i { animation: none; }
  .ha-grow { grid-template-rows: 1fr; }
}

/* The carousel scrolls naturally — no visible scrollbar or rail. */
.ha-rail { display: none; }

/* ---- composer — one line, Claude-style -------------------------------- */

.ha-composer {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 7px;
  border: 1px solid var(--ha-line);
  border-radius: 12px;
  background: #141a28;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .5s cubic-bezier(.22, 1, .36, 1),
              border-color .3s ease;
}
.hero-anim[data-act="1"] .ha-composer { opacity: 1; transform: none; }
.ha-composer.is-focus { border-color: rgba(74, 125, 255, .45); }

.ha-input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  line-height: 18px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
}
/* The field starts empty with the caret already blinking, so it reads as a
   live chatbot waiting for input rather than a placeholder frame. */
.ha-caret {
  display: none;
  width: 1.5px;
  height: 13px;
  background: var(--ha-blue-text);
  vertical-align: -2px;
  margin-left: 1px;
}
.ha-composer.is-focus .ha-caret { display: inline-block; animation: ha-blink 1s steps(1) infinite; }
@keyframes ha-blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

.ha-ic {
  width: 26px; height: 26px;
  flex: 0 0 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 0; padding: 0;
  background: transparent;
  color: var(--ha-mut);
  cursor: default;
  /* The svg has a fixed size, so the button has to clip while it collapses —
     without this the glyph spills out of the shrinking box and flickers. */
  overflow: hidden;
}
.ha-ic svg { width: 15px; height: 15px; flex: none; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.ha-plus { border: 1px solid var(--ha-line); }

/* The mic steps aside once there is something to send. Fading and shrinking
   the glyph runs first; the track it occupies closes a beat later, so the two
   never fight and there is no jump as the flex row re-lays out. */
.ha-mic {
  transition: opacity .16s ease,
              transform .16s ease,
              flex-basis .26s cubic-bezier(.22, 1, .36, 1) .1s,
              width .26s cubic-bezier(.22, 1, .36, 1) .1s,
              margin-right .26s cubic-bezier(.22, 1, .36, 1) .1s;
}
.ha-mic.is-gone {
  opacity: 0;
  transform: scale(.72);
  flex-basis: 0;
  width: 0;
  margin-right: -8px;                                /* swallow the flex gap */
  pointer-events: none;
}

/* Send is inert until there is text, then it fills in. */
.ha-send {
  background: #232a3a;
  color: var(--ha-dim);
  transition: background-color .25s ease, color .25s ease, transform .18s ease;
}
.ha-send.is-ready { background: var(--ha-blue); color: #fff; }
.ha-send.is-press { transform: scale(.86); }

/* ==========================================================================
   Mobile — a taller 4:5 authored size, min 360px wide

   The square layout leaves the doctor cards and the conversation cramped on a
   phone. Rather than shrink the square further, the animation is re-authored
   at 360x450: the same markup, laid out with more vertical room and slightly
   narrower cards. Because everything is scaled from --ha-base-w, this is a
   change of two numbers plus a few internal sizes.
   ========================================================================== */

@media (max-width: 767px) {
  .hero-anim {
    --ha-base-w: 360;
    --ha-base-h: 450;
  }

  /* More of the height goes to the conversation, and the card row narrows so
     two cards are never both half-cut. */
  .ha-doc-card { width: 236px; }
  .ha-scene.is-chat { padding-left: 14px; padding-right: 14px; }
  .ha-stack { left: 14px; right: 14px; }
  .ha-carousel { margin-left: -14px; margin-right: -14px; }
  .ha-track { padding-left: 14px; padding-right: 14px; }
  .ha-composer { left: 14px; right: 14px; }

  .ha-bub { max-width: 90%; }
  .ha-caps, .ha-voice { max-width: 100%; }
}

/* ==== css/agent-snippets.css ==== */
/* ==========================================================================
   Animated UI snippets

   The product screens inside the cards are live DOM, not images, so they can
   animate. Each snippet plays when its parent .agent-card is hovered (or
   focused, for keyboards) and reverses on leave — transitions with staggered
   delays rather than keyframes, so the state is always deterministic.

   Snippets bleed to the card edges: no side padding, and the frame's own
   border/radius is dropped on the bleeding sides.

   Tokens match the product screenshots.
   ========================================================================== */

.agent-snip {
  --sn-blue: #2f6bff;
  --sn-blue-text: #4a7dff;
  --sn-bot: #171c2b;
  --sn-card: #141a28;
  --sn-line: #242a3b;
  --sn-field: #1a2030;
  --sn-mut: #8b93a7;
  --sn-dim: #6b7280;
  --sn-green: #22c55e;
  --sn-green-text: #4ade80;
  --sn-amber: #facc15;
  --sn-red: #fb7185;

  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 11px;
  line-height: 15px;
  color: #fff;
}

.agent-snip * { box-sizing: border-box; }

/* The plate is fluid. It used to be authored at a fixed px width and scaled by
   JS, which sliced panels mid-element wherever the script had not run or the
   column was narrower than the plate. Percentage-width panels pinned to their
   own edges reflow instead, so nothing is ever cropped part-way through. */
.sn-plate { width: 100%; height: 100%; position: relative; }

/* Belt and braces: nothing inside a snippet may spill past the card. */
.agent-snip, .sn-plate { max-width: 100%; }
.agent-snip * { max-width: 100%; }

/* ---- shared atoms ------------------------------------------------------ */

.sn-bub { max-width: 84%; padding: 8px 11px; border-radius: 12px; font-size: 11.5px; line-height: 16px; }
.sn-bub.bot { background: var(--sn-bot); border: 1px solid rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .86); }
.sn-bub.me { background: var(--sn-blue); color: #fff; }

.sn-row { display: flex; }
.sn-row.right { justify-content: flex-end; }

.sn-card { border: 1px solid var(--sn-line); border-radius: 12px; background: var(--sn-card); overflow: hidden; }
.sn-sep { height: 1px; background: var(--sn-line); }
.sn-pad { padding: 10px 11px; }

.sn-lbl { font-size: 8.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--sn-dim); font-weight: 500; }

.sn-tile { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.sn-tile.b { background: #1e2a4a; color: #7aa2ff; }
.sn-tile.g { background: #16331f; color: #4ade80; }
.sn-tile.pl { background: #2a1e3d; color: #a78bfa; }

.sn-name { font-size: 11px; font-weight: 600; }
.sn-sub { font-size: 9px; color: var(--sn-mut); margin-top: 1px; }
.sn-when { font-size: 9px; color: var(--sn-green-text); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.sn-when i { width: 4px; height: 4px; border-radius: 50%; background: var(--sn-green); display: block; }

.sn-pill { font-size: 9px; padding: 2px 7px; border-radius: 999px; }
.sn-pill.ok { background: rgba(34, 197, 94, .15); color: var(--sn-green-text); }
.sn-pill.warn { background: rgba(250, 204, 21, .15); color: var(--sn-amber); }
.sn-pill.blue { background: rgba(47, 107, 255, .17); color: var(--sn-blue-text); }

/* Anything marked .sn-in is hidden until the card is hovered. */
.sn-in {
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .42s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.agent-card:hover .sn-in,
.agent-card:focus-within .sn-in { opacity: 1; transform: none; }

.sn-in.d1 { transition-delay: .06s } .sn-in.d2 { transition-delay: .18s }
.sn-in.d3 { transition-delay: .30s } .sn-in.d4 { transition-delay: .44s }
.sn-in.d5 { transition-delay: .58s } .sn-in.d6 { transition-delay: .72s }

/* Collapse-to-grow, for panels that should expand the card they sit in. */
.sn-grow { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.22, 1, .36, 1) .3s; }
.agent-card:hover .sn-grow, .agent-card:focus-within .sn-grow { grid-template-rows: 1fr; }
.sn-grow > * { overflow: hidden; min-height: 0; }

/* ---- date + slot controls --------------------------------------------- */

.sn-dates { display: flex; gap: 5px; margin-top: 6px; }
.sn-day {
  flex: 1 1 0; min-width: 0; text-align: center; padding: 5px 0 4px;
  border: 1px solid var(--sn-line); border-radius: 7px; background: var(--sn-field);
  transition: background-color .4s ease .34s, border-color .4s ease .34s;
}
.sn-day .dn { font-size: 8px; color: var(--sn-mut); transition: color .4s ease .34s; }
.sn-day .dd { font-size: 11px; font-weight: 600; }
.sn-day .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--sn-green); margin: 2px auto 0; }
.sn-day.off { opacity: .38 } .sn-day.off .dot { visibility: hidden }
.agent-card:hover .sn-day.pick, .agent-card:focus-within .sn-day.pick { background: var(--sn-blue); border-color: var(--sn-blue); }
.agent-card:hover .sn-day.pick .dn, .agent-card:focus-within .sn-day.pick .dn { color: rgba(255, 255, 255, .75); }

.sn-slots { display: flex; gap: 6px; margin-top: 6px; }
.sn-slot {
  font-size: 10px; padding: 5px 9px; border-radius: 7px;
  border: 1px solid var(--sn-line); background: var(--sn-field); color: var(--sn-mut);
  transition: background-color .4s ease .62s, border-color .4s ease .62s, color .4s ease .62s;
}
.sn-slot.gone { color: var(--sn-dim); text-decoration: line-through; opacity: .6 }
.sn-slot.free { color: var(--sn-blue-text); border-color: rgba(74, 125, 255, .45) }
.agent-card:hover .sn-slot.pick, .agent-card:focus-within .sn-slot.pick { background: var(--sn-blue); border-color: var(--sn-blue); color: #fff; }

/* ---- checkboxes -------------------------------------------------------- */

.sn-opt { display: flex; align-items: center; gap: 10px; padding: 8px 11px; }
.sn-opt + .sn-opt { border-top: 1px solid var(--sn-line); }
.sn-box {
  width: 17px; height: 17px; flex: none; border-radius: 5px; border: 1.5px solid #3a4155;
  display: grid; place-items: center;
  transition: background-color .3s ease, border-color .3s ease;
}
.sn-box svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .25s ease; }
.sn-opt-t { font-size: 10.5px; color: var(--sn-mut); transition: color .3s ease; }

.agent-card:hover .sn-opt.tick .sn-box,
.agent-card:focus-within .sn-opt.tick .sn-box { background: var(--sn-blue); border-color: var(--sn-blue); }
.agent-card:hover .sn-opt.tick .sn-box svg,
.agent-card:focus-within .sn-opt.tick .sn-box svg { opacity: 1; }
.agent-card:hover .sn-opt.tick .sn-opt-t,
.agent-card:focus-within .sn-opt.tick .sn-opt-t { color: #fff; }

.sn-opt.t1 .sn-box, .sn-opt.t1 .sn-box svg, .sn-opt.t1 .sn-opt-t { transition-delay: .10s }
.sn-opt.t2 .sn-box, .sn-opt.t2 .sn-box svg, .sn-opt.t2 .sn-opt-t { transition-delay: .26s }
.sn-opt.t3 .sn-box, .sn-opt.t3 .sn-box svg, .sn-opt.t3 .sn-opt-t { transition-delay: .42s }

/* ---- meters ------------------------------------------------------------ */

.sn-track { height: 6px; border-radius: 999px; background: #3a4155; overflow: hidden; }
.sn-fill { height: 100%; border-radius: 999px; background: var(--sn-blue); width: 6%; transition: width .9s cubic-bezier(.22, 1, .36, 1) .2s; }
.agent-card:hover .sn-fill, .agent-card:focus-within .sn-fill { width: var(--sn-to, 60%); }

/* ---- waveform ---------------------------------------------------------- */

.sn-wave { display: flex; align-items: center; justify-content: center; gap: 2.5px; height: 30px; }
.sn-wave i { display: block; width: 3px; border-radius: 2px; background: var(--sn-blue-text); height: 5px; opacity: .45; transition: height .3s ease, opacity .3s ease; }
.agent-card:hover .sn-wave i, .agent-card:focus-within .sn-wave i { animation: sn-bar 1.15s ease-in-out infinite; }
@keyframes sn-bar { 0%, 100% { height: 5px; opacity: .45 } 50% { height: 24px; opacity: 1 } }

.sn-orb {
  width: 66px; height: 66px; border-radius: 50%; margin: 0 auto;
  background: radial-gradient(circle at 34% 28%, #8fb0ff, #2f6bff 56%, #122466);
  box-shadow: 0 0 0 rgba(47, 107, 255, 0);
  transition: box-shadow .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
.agent-card:hover .sn-orb, .agent-card:focus-within .sn-orb { box-shadow: 0 0 34px rgba(47, 107, 255, .55); transform: scale(1.05); }

/* ---- browser chrome, for the embedded-widget snippet ------------------- */

.sn-chrome { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--sn-line); }
.sn-chrome i { width: 7px; height: 7px; border-radius: 50%; background: #3a4155; display: block; }
.sn-url { margin-left: 8px; flex: 1; height: 16px; border-radius: 999px; background: var(--sn-field); display: flex; align-items: center; padding: 0 9px; font-size: 8.5px; color: var(--sn-dim); }

.sn-skel { height: 7px; border-radius: 4px; background: #232a3a; }

/* ---- hint ------------------------------------------------------------- */

.agent-snip-hint {
  position: absolute; right: 12px; top: 10px; z-index: 5;
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  color: var(--sn-blue-text);
  background: rgba(47, 107, 255, .12); border: 1px solid rgba(74, 125, 255, .3);
  padding: 3px 8px; border-radius: 999px;
  opacity: .5; transition: opacity .3s ease;
}
.agent-card:hover .agent-snip-hint, .agent-card:focus-within .agent-snip-hint { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .sn-in { opacity: 1; transform: none; transition: none; }
  .sn-grow { grid-template-rows: 1fr; transition: none; }
  .sn-fill { width: var(--sn-to, 60%); transition: none; }
  .sn-wave i { animation: none; }
}

/* Touch devices have no hover — show the played state. */
@media (hover: none) {
  .sn-in { opacity: 1; transform: none; }
  .sn-grow { grid-template-rows: 1fr; }
  .sn-fill { width: var(--sn-to, 60%); }
  .sn-day.pick { background: var(--sn-blue); border-color: var(--sn-blue); }
  .sn-day.pick .dn { color: rgba(255, 255, 255, .75); }
  .sn-slot.pick { background: var(--sn-blue); border-color: var(--sn-blue); color: #fff; }
  .sn-opt.tick .sn-box { background: var(--sn-blue); border-color: var(--sn-blue); }
  .sn-opt.tick .sn-box svg { opacity: 1; }
  .sn-opt.tick .sn-opt-t { color: #fff; }
}

/* ---- [3] renamed-class aliases ---- */
.page-wrapper-2 {
  overflow: clip;
}
.container-45 {
  width: 100%;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
}
.button-primary-3 {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  border: 1px solid var(--blue);
  background-color: var(--blue);
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  color: var(--white);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  padding: 12px 25px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  position: static;
  box-shadow: 0 0 16px #0003;
}
.button-primary-3:hover {
  background-image: linear-gradient(#0000001a, #0000001a);
}
.button-primary-3.mob-full.hero-explore-ghost {
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--white);
  background-color: #ffffff1a;
  border-color: #0000;
  transition-property: none;
}
.button-primary-3.mob-full.hero-explore-ghost:hover {
  background-color: #fff3;
  background-image: none;
}
.button-primary-3.mob-full.hero-app-only {
  display: none;
}
.button-secondary-2 {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  border: 1px solid var(--blue);
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  color: var(--white);
  background-color: #ffffff1a;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  padding: 12px 25px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  box-shadow: 0 0 16px #0003;
}
.button-secondary-2:hover {
  background-image: linear-gradient(#0000001a, #0000001a);
}
.button-secondary-2.is-small {
  padding: 8px 12px;
}
.button-secondary-2.full-width {
  width: 100%;
}
.button-secondary-2.is-blue {
  color: var(--blue);
}
.nav-link-7 {
  color: var(--white);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 4px 16px;
  font-size: 14px;
  font-weight: 500;
  transition: all .3s ease-in-out;
  display: inline-flex;
}
.nav-link-7:hover {
  background-color: var(--blue);
}
.dropdown-list-7 {
  background-color: var(--white);
  border-radius: 12px;
  min-width: 196px;
  padding: 24px;
  top: 116%;
}
.footer-2 {
  background-color: var(--royal-blue);
}
.radio-button-field-2 {
  background-color: var(--white);
  cursor: pointer;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0;
  padding: 16px 18px;
  transition: all .35s ease-in-out;
  display: flex;
}
.radio-button-2 {
  cursor: pointer;
  border: 1px solid #9ea8b8;
  flex: none;
  order: 9999;
  width: 22px;
  height: 22px;
  margin-top: 0;
  margin-left: auto;
}
.radio-button-2.w--redirected-checked {
  border: 1px none var(--transparent);
  background-image: url("https://cdn.prod.website-files.com/69aa8f05c1aa540cd7c00500/69b24ba6f16bb4d255bd0e2d_Icon%20(16).svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 22px 22px;
}
.radio-button-2.w--redirected-focus {
  box-shadow: 0 0 #0000;
}
@media screen and (min-width: 1280px) {
.nav-link-7 {
    font-size: 16px;
  }
}
@media screen and (min-width: 1440px) {
.container-45 {
    max-width: 1280px;
  }
}
@media screen and (max-width: 991px) {
.container-45 {
    max-width: 95%;
  }
.button-primary-3.mob-full.hero-app-only {
    display: inline-flex;
  }
.nav-link-7 {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    justify-content: flex-start;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 18px;
    display: inline-flex;
  }
.nav-link-7:hover, .nav-link-7:visited {
    background-color: var(--transparent);
  }
.dropdown-list-7.w--open {
    min-width: auto;
    margin-top: 20px;
    position: static;
  }
.menu-button-4 {
    color: var(--white);
    margin-left: 20px;
    padding: 0;
  }
.menu-button-4.w--open {
    background-color: var(--transparent);
  }
.radio-button-field-2 {
    padding: 14px 12px;
  }
.radio-button-2 {
    width: 20px;
    height: 20px;
  }
.radio-button-2.w--redirected-checked {
    background-size: 20px 20px;
  }
}
@media screen and (max-width: 767px) {
.container-45 {
    max-width: 95%;
  }
.dropdown-list-7.w--open {
    padding: 20px;
  }
}
@media screen and (max-width: 479px) {
.container-45 {
    max-width: 100%;
  }
.button-primary-3.mob-full {
    width: 100%;
  }
.button-secondary-2.is-small {
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 8px;
  }
.nav-link-7 {
    font-size: 16px;
  }
.dropdown-list-7.w--open {
    padding-left: 10px;
    padding-right: 10px;
  }
.radio-button-field-2 {
    padding: 12px 10px;
  }
.radio-button-2 {
    width: 18px;
    height: 18px;
  }
.radio-button-2.w--redirected-checked {
    background-size: 18px 18px;
  }
}
.agent-hero .container-45 { position: relative; z-index: 2; }
@media screen and (max-width: 767px) {
.footer-2 .footer-logo svg { height: 58px; }
}
.footer-2 .footer-logo { width: auto; }
.footer-2 .footer-logo svg { display: block; height: 74px; width: auto; }
.footer-2 a,
.footer-2 a:hover,
.footer-2 a:focus,
.footer-2 .footer-menu-link,
.footer-2 .footer-button,
.footer-2 .footer-logo,
.footer-2 [class*="social"] { transition: none !important; }
.footer-2 .footer-button-wrap { display: none !important; }
.footer-2 .footer-info-column { display: flex; flex-direction: column; justify-content: center; height: 100%; }
@media screen and (max-width: 767px) {
.footer-2 .footer-top-wrap,
  .footer-2 .footer-info-grid { display: flex; flex-direction: column; gap: 0; }
.footer-2 .footer-column-2 { width: 100%; }
.footer-2 .footer-menu-list { display: flex; flex-direction: column; }
.footer-2 .footer-menu-title {
    padding: 22px 0 4px;
    font-size: 11px;
    line-height: 16.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-50);
  }
.footer-2 .footer-menu-title strong { font-weight: 600; }
.footer-2 .footer-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: 16.5px;
    line-height: 24px;
    font-weight: 500;
    color: var(--ink-80);
  }
.footer-2 .footer-menu-link:last-child { border-bottom: 0; }
.footer-2 .footer-menu-link::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 3px;
    border-right: 1.75px solid rgba(255, 255, 255, .35);
    border-bottom: 1.75px solid rgba(255, 255, 255, .35);
    transform: rotate(-45deg);
  }
.footer-2 .footer-menu-link .agent-new,
  .footer-2 .footer-menu-link .w-embed { margin-right: auto; }
.footer-2 .footer-left-box { width: 100%; }
.footer-2 .footer-info-column { height: auto; }
.footer-2 .footer-info-top { padding-top: 8px; }
.footer-2 .footer-summary { margin-top: 12px; font-size: 14px; line-height: 21px; }
.footer-2 .footer-divider { display: none; }
.footer-2 .footer-note { margin-top: 24px; font-size: 12.5px; line-height: 19px; }
.footer-2 .footer-bottom-wrap { gap: 4px; padding-top: 8px; }
.footer-2 .footer-bottom-wrap { align-items: stretch; }
.footer-2 .legal-list { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
.footer-2 .legal-list a { width: 100%; }
.footer-2 .social-media-list { justify-content: flex-start; }
.footer-2 .copyright-list { width: 100%; }
.footer-2 .legal-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: 15px;
    line-height: 22px;
    color: var(--ink-70);
  }
.footer-2 .legal-list a:last-child { border-bottom: 0; }
.footer-2 .legal-list a::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-right: 3px;
    border-right: 1.6px solid rgba(255, 255, 255, .3);
    border-bottom: 1.6px solid rgba(255, 255, 255, .3);
    transform: rotate(-45deg);
  }
.footer-2 .social-media-list { gap: 8px; margin: 18px 0 6px; }
.footer-2 .social-media-link {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--hairline);
    border-radius: 12px;
  }
.footer-2 .copyright-text { font-size: 13px; line-height: 20px; }
}
.agent-hero-sub,
.agent-hero-point,
.section-summary,
.agent-channel-body,
.agent-capability-body,
.agent-feature p,
.agent-step-body,
.agent-mini-body,
.agent-coverage-sub,
.agent-coverage-note,
.agent-flow-body,
.agent-stat-label,
.agent-stat-lead-label,
.agent-stat-lead-note,
.agent-say-text,
.footer-2 .footer-summary,
.cta-section .section-summary { font-weight: 300; }
@media screen and (max-width: 767px) {
.footer-2 .container-45 { display: flex; flex-direction: column; }
.footer-2 .footer-middle-wrap,
  .footer-2 .footer-info-grid,
  .footer-2 .footer-left-box { display: contents; }
.footer-2 .footer-info-column { order: 1; }
.footer-2 .footer-left-box > .footer-column-2 { order: 2; }
.footer-2 .footer-top-wrap { order: 3; }
.footer-2 .footer-right-box { order: 4; margin-top: 36px; }
.footer-2 .footer-note { order: 5; }
.footer-2 .footer-bottom-wrap { order: 6; }
.footer-2 .footer-info-column {
    padding: 20px 18px 22px;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    background-color: rgba(255, 255, 255, .03);
    margin-bottom: 4px;
  }
.footer-2 .footer-info-top { padding-top: 0; }
}

/* ---- [4] Eka Doc leakage ----
   The pasted page's <body> carries no class, so it falls back to Eka Doc's
   defaults: Arial at 14px/20 on white. Everything on the page inherits from
   it, which was 40 of the 48 computed-style differences on its own. */
body {
  background-color: #000;
  color: #333;
  font-family: Inter, sans-serif;
  font-size: 16px;
  /* Unitless, like Eka Care's: an absolute 24px would inherit as 24px into
     every child instead of scaling with its own font size, which flattened
     the footer titles, the legal links and the CTA badges. */
  line-height: 1.5;
  font-weight: 400;
}

/* Eka Doc rounds its containers and shouts in its buttons; Eka Care's rules
   simply do not mention these properties, so they came through. */
.container, .container-45 {
  border-radius: 0;
  /* Eka Doc clips its containers. The navbar sits in one, so the Products
     dropdown was being cut off at the bottom edge of the bar. */
  overflow: visible;
}

.button-primary, .button-primary-3 {
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.5;
}

/* …and the nav CTA, a size down, keeps its own. */
.agent-nav-cta { line-height: 18px; }

/* Eka Doc's hover turns the button charcoal (#32343a). Eka Care's leaves the
   blue alone and lays a 10% black wash over it — which is also why its buttons
   look instant: background-image is not an animatable property. */
.button-primary:hover,
.button-primary-3:hover {
  color: var(--white, #fff);
  background-color: var(--blue, #3b5bfa);
  background-image: linear-gradient(#0000001a, #0000001a);
}