/* [project]/src/modules/conversations/ui/client/site-chat.css [app-client] (css) */
@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url("/fonts/ibm-plex-sans-cyrillic-wght-normal.9409ee2181.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url("/fonts/ibm-plex-sans-latin-wght-normal.e2291e842c.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.iw {
  --ink: #111b21;
  --muted: #5b6973;
  --line: #e1e6e9;
  --panel: #f6f8f9;
  --soft: color-mix(in srgb,var(--accent) 10%,#fff);
  z-index: 2147483000;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font: 400 14.5px / 1.45 IBM Plex Sans, Segoe UI, system-ui, -apple-system, Roboto, sans-serif;
  position: fixed;
  bottom: 0;
  right: 0;
}

.iw *, .iw :before, .iw :after {
  box-sizing: border-box;
}

.iw p {
  margin: 0;
}

.iw-ic {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9px;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  width: 20px;
  height: 20px;
}

.iw button, .iw textarea {
  font: inherit;
  color: inherit;
}

.iw button {
  cursor: pointer;
}

.iw-launch {
  right: max(16px,env(safe-area-inset-right, 0px));
  bottom: max(16px,env(safe-area-inset-bottom, 0px));
  width: 56px;
  height: 56px;
  color: var(--on-accent);
  background: var(--accent);
  border: 0;
  border-radius: 16px;
  place-items: center;
  padding: 0;
  display: grid;
  position: fixed;
  box-shadow: 0 1px 2px #0000002e, 0 10px 26px -10px #00000073;
}

.iw-launch .iw-ic {
  width: 24px;
  height: 24px;
}

.iw-launch:focus-visible, .iw-close:focus-visible, .iw-send:focus-visible {
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--ink);
  outline: 2px solid #fff;
}

.iw.open .iw-launch {
  display: none;
}

.iw-panel {
  background: #fff;
  flex-direction: column;
  display: flex;
  position: fixed;
  inset: 0;
}

.iw-head {
  min-height: 60px;
  color: var(--on-accent);
  background: var(--accent);
  align-items: center;
  gap: 10px;
  padding: 8px 6px 8px 14px;
  display: flex;
}

.iw-logo {
  width: 36px;
  height: 36px;
  color: var(--accent);
  background: var(--on-accent);
  border-radius: 9px;
  flex: none;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  display: grid;
}

.iw-logo.img {
  background: #0b1a1d;
}

.iw-logo img {
  width: 22px;
  height: 22px;
}

.iw-title {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.iw-title b {
  font-size: 15.5px;
  font-weight: 600;
}

.iw-title small {
  opacity: .85;
  align-items: flex-start;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.3;
  display: flex;
}

.iw-on {
  background: currentColor;
  border-radius: 50%;
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 4px;
}

.iw-close {
  width: 44px;
  height: 44px;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 8px;
  flex: none;
  place-items: center;
  display: grid;
}

.iw-close:hover {
  background: #00000014;
}

.iw-log {
  background: var(--panel);
  flex-direction: column-reverse;
  flex: 1;
  min-height: 0;
  display: flex;
  overflow-y: auto;
}

.iw-log-in {
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px;
  display: flex;
}

.iw-m {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  border-radius: 8px;
  flex-direction: column;
  max-width: 86%;
  padding: 8px 11px 6px;
  font-size: 15px;
  line-height: 1.45;
  display: flex;
}

.iw-m time {
  color: var(--muted);
  align-self: flex-end;
  margin-top: 2px;
  font-family: IBM Plex Mono, ui-monospace, monospace;
  font-size: 11px;
}

.iw-m.in {
  box-shadow: inset 0 0 0 1px var(--line);
  background: #fff;
  align-self: flex-start;
}

.iw-m.auto {
  background: var(--soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.iw-m.out {
  color: var(--on-accent);
  background: var(--accent);
  align-self: flex-end;
}

.iw-m.out time {
  color: inherit;
  opacity: .75;
}

.iw-m.is-sending {
  opacity: .6;
}

.iw-who {
  color: var(--muted);
  margin-bottom: 1px;
  font-size: 12px;
  font-weight: 600;
}

.iw-error {
  color: #6c2119;
  background: #fdecea;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
}

.iw-compose {
  border-top: 1px solid var(--line);
  background: #fff;
  align-items: flex-end;
  gap: 4px;
  padding: 8px;
  display: flex;
}

.iw-compose textarea {
  resize: none;
  background: var(--panel);
  border: 0;
  border-radius: 8px;
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  padding: 11px 10px;
  font-size: 15.5px;
}

.iw-compose textarea:focus {
  outline: 2px solid color-mix(in srgb,var(--accent) 60%,#000);
  outline-offset: -2px;
}

.iw-compose textarea::placeholder {
  color: #7b8890;
}

.iw-send {
  width: 44px;
  height: 44px;
  color: var(--on-accent);
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  place-items: center;
  display: grid;
}

.iw-send:disabled {
  opacity: .5;
  cursor: default;
}

.iw-foot {
  padding: 6px 0 max(8px,env(safe-area-inset-bottom, 0px));
  text-align: center;
  color: #7b8890;
  background: #fff;
  font-size: 11.5px;
}

@media (min-width: 640px) {
  .iw-panel {
    border-radius: 12px;
    width: 368px;
    height: min(580px, 100vh - 116px);
    inset: auto 20px 88px auto;
    overflow: hidden;
    box-shadow: 0 0 0 1px #00000014, 0 24px 60px -20px #00000073;
  }

  .iw.open .iw-launch {
    display: grid;
  }

  .iw-launch {
    bottom: 20px;
    right: 20px;
  }
}

/* [project]/src/modules/leads/ui/leads.css [app-client] (css) */
.form-card {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px var(--line-2),inset 0 1px 0 #ffffff14,0 50px 100px -50px #000000d9;
  background: linear-gradient(#143a40b8, #0a2025d1);
  border-radius: 28px;
  padding: clamp(22px, 3vw, 36px);
}

.fc-head {
  align-items: center;
  gap: clamp(16px, 2vw, 26px);
  display: flex;
}

.porthole {
  aspect-ratio: 1;
  background: #13414a;
  border-radius: 50%;
  flex: none;
  width: clamp(120px, 10vw, 148px);
  height: auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px #a0e6ec59, 0 0 0 6px #7fe8f00f, 0 0 30px -6px #7fe8f073;
}

.porthole video {
  aspect-ratio: 1106 / 1264;
  width: 308%;
  max-width: none;
  height: auto;
  position: absolute;
  top: 44.3%;
  left: 50%;
  transform: translate(-50%, -44.3%);
}

.porthole video.square {
  object-fit: cover;
  width: 100%;
  height: 100%;
  inset: 0;
  transform: none;
}

.fc-head h3 {
  font: 400 clamp(20px,1.8vw,24px)/1.2 var(--display);
  letter-spacing: -.01em;
}

.fc-head p {
  color: var(--text-2);
  margin-top: 5px;
  font-size: 14.5px;
}

.form {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
  display: grid;
}

.f.wide {
  grid-column: 1 / -1;
}

.pick {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.pick label {
  cursor: pointer;
  position: relative;
}

.pick input {
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  inset: 0;
}

.pick span {
  min-height: 40px;
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  background: #03111473;
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .2s, color .2s, box-shadow .2s;
  display: inline-flex;
}

.pick span .ic {
  width: 16px;
  height: 16px;
}

.pick input:hover + span {
  box-shadow: inset 0 0 0 1px #7fe8f066;
}

.pick input:checked + span {
  color: #04292e;
  background: var(--aqua);
  box-shadow: none;
}

.pick input:focus-visible + span {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
}

.f-foot {
  flex-wrap: wrap;
  grid-column: 1 / -1;
  align-items: center;
  gap: 14px 20px;
  margin-top: 6px;
  display: flex;
}

.f-foot p {
  color: var(--muted);
  flex: 220px;
  font-size: 13px;
  line-height: 1.5;
}

.done {
  background: #6be3ac0f;
  border-radius: 20px;
  justify-items: start;
  gap: 14px;
  margin-top: 28px;
  padding: 26px;
  display: grid;
  box-shadow: inset 0 0 0 1px #6be3ac40;
}

.done[hidden], .form[hidden] {
  display: none;
}

.done:focus {
  outline: none;
}

.done-ic {
  color: #05261a;
  background: var(--ok);
  border-radius: 50%;
  place-items: center;
  width: 48px;
  height: 48px;
  display: grid;
}

.done-ic .ic {
  stroke-width: 2.4px;
  width: 24px;
  height: 24px;
}

.done h4 {
  font: 400 clamp(20px,1.8vw,24px)/1.25 var(--display);
}

.done p {
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.6;
}

@media (max-width: 760px) {
  .form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .porthole {
    width: 96px;
  }
}

.hp {
  width: 1px;
  height: 1px;
  top: auto;
  left: -10000px;
  overflow: hidden;
  position: absolute !important;
}

.form-alert {
  color: #ffd9d2;
  background: #ff7a6b14;
  border-radius: 16px;
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  padding: 16px 18px;
  font-size: 14.5px;
  line-height: 1.55;
  display: grid;
  box-shadow: inset 0 0 0 1px #ff7a6b52;
}

.form-alert[hidden] {
  display: none;
}

.form-alert:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px #ff7a6b8c, 0 0 0 4px #ff7a6b1f;
}

.form-alert .ic {
  color: #ff9d8f;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.form-alert-title {
  color: #ffe7e2;
  font-weight: 600;
}

.form-alert p + p {
  margin-top: 4px;
}

.form-alert-ref {
  color: #e8b3aa;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.f-foot .btn .spin {
  border-color: #04292e #04292e40 #04292e40;
}

/* [project]/src/modules/leads/ui/cabinet.css [app-client] (css) */
.cab-section {
  flex-direction: column;
  gap: 14px;
  display: flex;
}

.cab-head {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px 20px;
  display: flex;
}

.cab-title {
  overflow-wrap: anywhere;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.cab-sub {
  color: var(--muted);
  margin-top: 4px;
  font-size: 13.5px;
}

.cab-hint {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.cab-back {
  color: var(--accent);
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
}

.cab-back .ic {
  width: 15px;
  height: 15px;
}

.cab-card {
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 10px;
  padding: 16px;
}

.cab-counts {
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
}

.count {
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  display: flex;
}

.count + .count {
  border-left: 1px solid var(--line);
}

.count-n {
  font-family: var(--mono);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
}

.count-l {
  color: var(--muted);
  font-size: 12.5px;
}

.count-new .count-n {
  color: var(--accent);
}

.chip {
  white-space: nowrap;
  border-radius: 5px;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
}

.chip-dot {
  display: none;
}

.chip-new {
  color: #fff;
  background: var(--accent);
}

.chip-in_progress {
  color: var(--amber);
  background: var(--amber-bg);
}

.chip-done {
  color: var(--green);
  background: var(--green-bg);
}

.lead-list {
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.lead-list li + li {
  border-top: 1px solid var(--line);
}

.lead-row {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 6px 18px;
  padding: 12px 16px;
  display: grid;
  position: relative;
}

.lead-row:hover {
  background: var(--hover);
}

.lead-row.is-new {
  box-shadow: inset 3px 0 0 var(--accent);
}

.lead-main, .lead-meta {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.lead-company {
  color: var(--ink);
  overflow-wrap: anywhere;
  font-size: 15px;
  font-weight: 600;
}

.lead-person {
  color: var(--text-2);
  overflow-wrap: anywhere;
  font-size: 13.5px;
}

.lead-contact {
  font-family: var(--mono);
  color: var(--ink);
  overflow-wrap: anywhere;
  font-size: 13px;
}

.lead-interests {
  color: var(--muted);
  font-size: 12.5px;
}

.lead-side {
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  display: flex;
}

.lead-time {
  font-family: var(--mono);
  color: var(--muted);
  white-space: nowrap;
  font-size: 12.5px;
}

.lead-warn {
  color: var(--red);
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
}

.lead-warn .ic {
  width: 13px;
  height: 13px;
}

.lead-go {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.cab-section .cab-empty {
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 10px;
  padding: 48px 20px;
}

.cab-toast {
  color: var(--green);
  background: var(--green-bg);
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 500;
  display: flex;
}

.cab-toast .ic {
  width: 16px;
  height: 16px;
}

.lead-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  display: grid;
}

.lead-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  display: grid;
}

.lead-field {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.lead-field dt {
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.lead-field dd {
  color: var(--ink);
  overflow-wrap: anywhere;
  font-size: 14.5px;
}

.lead-field dd a {
  color: var(--accent);
  font-weight: 500;
}

.lead-none {
  color: var(--muted);
}

.lead-comment {
  border-top: 1px solid var(--line);
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
  padding-top: 14px;
  display: flex;
}

.lead-comment h2 {
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.lead-comment p {
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14.5px;
  line-height: 1.55;
}

.lead-aside {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.lead-aside h2 {
  font-size: 16px;
  font-weight: 600;
}

.status-form {
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 8px;
  flex-direction: column;
  display: flex;
}

.status-opt {
  min-height: 46px;
  font: 600 14px/1 var(--body);
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  display: flex;
}

.status-opt + .status-opt {
  border-top: 1px solid var(--line);
}

.status-opt:first-child {
  border-radius: 8px 8px 0 0;
}

.status-opt:last-child {
  border-radius: 0 0 8px 8px;
}

.status-opt:hover:not(:disabled) {
  background: var(--hover);
}

.status-opt .chip-dot {
  background: var(--tone);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  display: block;
}

.status-new {
  --tone: var(--accent);
}

.status-in_progress {
  --tone: #d48f0f;
}

.status-done {
  --tone: #1f9d62;
}

.status-opt[aria-pressed="true"] {
  cursor: default;
  color: var(--ink);
  background: var(--accent-soft);
}

.lead-notify {
  border-radius: 8px;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.5;
  display: grid;
}

.lead-notify .ic {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.lead-notify.ok {
  color: var(--green);
  background: var(--green-bg);
}

.lead-notify.warn {
  color: #6c2119;
  background: var(--red-bg);
}

.lead-notify.warn .ic {
  color: var(--red);
}

@media (min-width: 1024px) {
  .cab-title {
    font-size: 22px;
  }

  .cab-counts {
    min-width: 420px;
  }

  .lead-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

@media (max-width: 720px) {
  .lead-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main side"
                         "meta side";
  }

  .lead-main {
    grid-area: main;
  }

  .lead-meta {
    grid-area: meta;
  }

  .lead-side {
    grid-area: side;
    align-self: start;
  }

  .lead-go {
    display: none;
  }

  .lead-fields {
    grid-template-columns: 1fr;
  }

  .cab-counts {
    width: 100%;
  }
}

/* [project]/src/platform/i18n/ui/client/language-switcher.css [app-client] (css) */
.lang {
  height: 42px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  background: #ffffff09;
  border-radius: 999px;
  flex: none;
  align-items: center;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}

.lang a {
  min-width: 30px;
  height: 100%;
  font: 600 12.5px/1 var(--body);
  letter-spacing: .06em;
  color: var(--text-2);
  border-radius: 999px;
  place-items: center;
  padding: 0 6px;
  text-decoration: none;
  transition: color .2s, background-color .2s, box-shadow .2s;
  display: grid;
}

.lang a:hover {
  color: var(--text);
  background: #7fe8f017;
}

.lang a[aria-current="true"] {
  color: var(--pearl);
  background: #7fe8f024;
  box-shadow: inset 0 0 0 1px #7fe8f061;
}

.lang a:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
  border-radius: 999px;
}

.lang-menu {
  height: 48px;
  padding: 4px;
}

.lang-menu a {
  min-width: 56px;
  font-size: 14px;
}

/* [project]/src/modules/access/ui/access.css [app-client] (css) */
dialog.modal {
  width: min(440px, 100vw - 32px);
  max-width: none;
  max-height: calc(100dvh - 32px);
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 26px;
  padding: 0;
  overflow: visible;
}

dialog.modal::backdrop {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #030c0ebd;
}

dialog.modal[open] {
  animation: .28s cubic-bezier(.2, .8, .2, 1) modalIn;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.98);
  }
}

.modal-card {
  max-height: calc(100dvh - 32px);
  box-shadow: inset 0 0 0 1px var(--line-2),inset 0 1px 0 #ffffff14,0 60px 120px -40px #000000e6,0 0 120px -50px #7fe8f066;
  background: linear-gradient(#123a40, #0a2328);
  border-radius: 26px;
  padding: clamp(24px, 4vw, 36px);
  position: relative;
  overflow: auto;
}

.modal-x {
  width: 38px;
  height: 38px;
  color: var(--text-2);
  cursor: pointer;
  background: #ffffff0d;
  border: 0;
  border-radius: 50%;
  place-items: center;
  padding: 0;
  display: grid;
  position: absolute;
  top: 16px;
  right: 16px;
}

.modal-x:hover {
  color: var(--text);
  background: #ffffff17;
}

.modal-x .ic {
  width: 18px;
  height: 18px;
}

.modal-logo {
  width: 105px;
  height: 28px;
}

.modal-title {
  font: 400 clamp(24px,2.2vw,30px)/1.15 var(--display);
  letter-spacing: -.015em;
  margin-top: 26px;
}

.modal-sub {
  color: var(--text-2);
  margin-top: 8px;
  font-size: 15px;
}

.mform {
  gap: 16px;
  margin-top: 24px;
  display: grid;
}

.pw {
  position: relative;
}

.pw input {
  padding-right: 52px;
}

.pw-eye {
  width: 40px;
  height: 40px;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 10px;
  place-items: center;
  padding: 0;
  display: grid;
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}

.pw-eye:hover {
  color: var(--text);
}

.pw-eye .ic {
  width: 19px;
  height: 19px;
}

.pw-eye .i-hide, .pw-eye[aria-pressed="true"] .i-show {
  display: none;
}

.pw-eye[aria-pressed="true"] .i-hide {
  display: block;
}

.form-err {
  color: #ffc2b8;
  background: #ff7a6b17;
  border-radius: 12px;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  font-size: 14px;
  display: flex;
  box-shadow: inset 0 0 0 1px #ff7a6b4d;
}

.form-err:empty {
  display: none;
}

.form-err .ic {
  flex: none;
  width: 17px;
  height: 17px;
}

.linkish {
  font: 500 14px/1.3 var(--body);
  color: var(--aqua-soft);
  cursor: pointer;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  justify-self: center;
  padding: 6px 4px;
  -webkit-text-decoration: underline #9fd9dd59;
  text-decoration: underline #9fd9dd59;
}

.linkish:hover {
  color: var(--pearl);
  text-decoration-color: currentColor;
}

.reset-done {
  color: var(--text);
  background: #6be3ac0f;
  border-radius: 14px;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  margin-top: 24px;
  padding: 16px;
  font-size: 15px;
  line-height: 1.55;
  display: grid;
  box-shadow: inset 0 0 0 1px #6be3ac40;
}

.reset-done[hidden] {
  display: none;
}

.reset-done .ic {
  width: 20px;
  height: 20px;
  color: var(--ok);
  margin-top: 2px;
}

.modal-back {
  margin-top: 16px;
}

.modal-foot {
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
  margin-top: 26px;
  padding-top: 20px;
  font-size: 14.5px;
}

.modal-foot a {
  color: var(--pearl);
  text-underline-offset: 3px;
  font-weight: 600;
}

.recovery-note {
  background: #7fe8f00f;
  box-shadow: inset 0 0 0 1px #7fe8f03d;
}

.recovery-note .ic {
  color: var(--aqua);
}

.acct {
  position: relative;
}

.acct-btn {
  max-width: 220px;
  height: 42px;
  font: 600 14px/1 var(--body);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-2);
  cursor: pointer;
  background: #ffffff09;
  border: 0;
  border-radius: 999px;
  align-items: center;
  gap: 9px;
  padding: 0 14px 0 5px;
  transition: background-color .2s, box-shadow .2s;
  display: inline-flex;
}

.acct-btn:hover, .acct-btn[aria-expanded="true"] {
  background: #7fe8f017;
  box-shadow: inset 0 0 0 1px #7fe8f061;
}

.acct-btn-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.acct-avatar {
  width: 32px;
  height: 32px;
  font: 600 12.5px/1 var(--body);
  letter-spacing: .04em;
  color: #04292e;
  background: linear-gradient(#f6fffe, #9fe3e8);
  border-radius: 50%;
  flex: none;
  place-items: center;
  display: grid;
}

.acct-panel {
  z-index: 60;
  min-width: 260px;
  box-shadow: inset 0 0 0 1px var(--line-2),0 30px 60px -24px #000000e6,0 0 60px -30px #7fe8f073;
  background: linear-gradient(#123a40, #0a2328);
  border-radius: 18px;
  gap: 2px;
  padding: 10px;
  display: grid;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
}

.acct-panel[hidden] {
  display: none;
}

.acct-id {
  border-bottom: 1px solid var(--line);
  gap: 3px;
  margin-bottom: 6px;
  padding: 8px 10px 12px;
  display: grid;
}

.acct-label {
  letter-spacing: .04em;
  color: var(--muted);
  font-size: 12px;
}

.acct-name {
  color: var(--pearl);
  overflow-wrap: anywhere;
  font-weight: 600;
}

.acct-email {
  color: var(--text-2);
  overflow-wrap: anywhere;
  font-size: 13px;
}

.acct-item {
  width: 100%;
  min-height: 44px;
  font: 500 14.5px/1.2 var(--body);
  color: var(--text);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  text-decoration: none;
  display: flex;
}

.acct-item:hover, .acct-item:focus-visible {
  background: #7fe8f014;
}

.acct-item .ic {
  width: 17px;
  height: 17px;
  color: var(--aqua-soft);
}

.acct-out {
  margin: 0;
}

.acct-out-ic {
  transform: scaleX(-1);
}

.acct-wide {
  gap: 10px;
  margin-top: 14px;
  display: grid;
}

.acct-wide .acct-who {
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  display: flex;
}

.acct-wide .acct-id {
  border: 0;
  margin: 0;
  padding: 0;
}

.acct-wide .btn, .mnav .acct-wide .btn {
  width: 100%;
  margin-top: 0;
}

.acct-wide .acct-out .btn {
  gap: 10px;
}

.setup-page {
  background: radial-gradient(1000px 480px at 80% -10%,#7fe8f017,transparent 60%),var(--ink-1);
  place-items: center;
  min-height: 100dvh;
  padding: clamp(24px, 6vh, 72px) 16px;
  display: grid;
}

.setup-card {
  width: min(480px, 100%);
  max-height: none;
}

.setup-logo {
  display: inline-block;
}

.setup-account {
  color: var(--text-2);
  overflow-wrap: anywhere;
  margin-top: 14px;
  font-size: 14px;
}

.setup-user {
  width: 1px;
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute !important;
}

.setup-rule {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.setup-generate {
  gap: 10px;
}

.setup-generate .ic {
  width: 17px;
  height: 17px;
  color: var(--aqua);
}

.setup-generated {
  background: #7fe8f00f;
  border-radius: 14px;
  gap: 10px;
  padding: 14px 16px;
  display: grid;
  box-shadow: inset 0 0 0 1px #7fe8f047;
}

.setup-generated-title {
  color: var(--pearl);
  font-size: 13px;
  font-weight: 600;
}

.setup-generated-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.setup-generated-row code {
  letter-spacing: .02em;
  color: var(--pearl);
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
  background: #03111499;
  border-radius: 10px;
  flex: 220px;
  padding: 10px 12px;
  font: 500 15px / 1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.setup-generated-hint {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
}

.setup-status {
  color: var(--text-2);
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  font-size: 15px;
  display: flex;
}

.setup-spin {
  border: 2px solid #7fe8f040;
  border-top-color: var(--aqua);
  border-radius: 50%;
  flex: none;
  width: 18px;
  height: 18px;
  animation: .8s linear infinite spin;
}

.setup-invalid {
  gap: 18px;
  display: grid;
}

.setup-invalid-note {
  line-height: 1.5;
}

/* [project]/src/modules/marketing/ui/marketing.css [app-client] (css) */
.top {
  z-index: 60;
  border-bottom: 1px solid #0000;
  transition: background-color .35s, border-color .35s;
  position: fixed;
  inset: 0 0 auto;
}

.top.scrolled {
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: var(--line);
  background: #061519d6;
}

.top-in {
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  height: 72px;
  display: flex;
}

.brand {
  border-radius: 6px;
  flex: none;
  display: block;
}

.brand img {
  width: 105px;
  height: 28px;
}

.nav {
  gap: clamp(14px, 1.8vw, 28px);
  margin-left: auto;
  display: flex;
}

.nav a {
  color: var(--text-2);
  white-space: nowrap;
  padding: 10px 0;
  font-size: 14.5px;
  text-decoration: none;
  transition: color .2s;
  position: relative;
}

.nav a:after {
  content: "";
  background: var(--aqua);
  opacity: 0;
  border-radius: 2px;
  height: 2px;
  transition: opacity .25s, transform .25s;
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  transform: scaleX(.4);
}

.nav a:hover, .nav a:focus-visible {
  color: var(--text);
}

.nav a:hover:after, .nav a:focus-visible:after {
  opacity: .4;
  transform: scaleX(1);
}

.nav a[aria-current="true"] {
  color: var(--pearl);
}

.nav a[aria-current="true"]:after {
  opacity: 1;
  transform: scaleX(1);
  box-shadow: 0 0 12px #7fe8f0a6;
}

.top-actions {
  flex: none;
  align-items: center;
  gap: 10px;
  display: flex;
}

.top .btn {
  flex: none;
}

.menu-btn {
  width: 42px;
  height: 42px;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-2);
  cursor: pointer;
  background: #ffffff0d;
  border: 0;
  border-radius: 50%;
  flex: none;
  place-items: center;
  padding: 0;
  display: none;
}

.menu-btn .ic {
  width: 20px;
  height: 20px;
}

.menu-btn .i-close, .menu-btn[aria-expanded="true"] .i-open {
  display: none;
}

.menu-btn[aria-expanded="true"] .i-close {
  display: block;
}

.mnav {
  padding: 8px max(16px,env(safe-area-inset-right, 0px)) 20px max(16px,env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--line);
  background: #061519;
  position: absolute;
  top: 72px;
  left: 0;
  right: 0;
  box-shadow: 0 30px 60px -30px #000c;
}

.mnav[hidden] {
  display: none;
}

.mnav nav {
  display: grid;
}

.mnav nav a {
  min-height: 52px;
  color: var(--text-2);
  border-radius: 12px;
  align-items: center;
  padding: 0 14px;
  font-size: 17px;
  text-decoration: none;
  display: flex;
}

.mnav nav a + a {
  margin-top: 2px;
}

.mnav nav a:hover, .mnav nav a:focus-visible {
  color: var(--text);
  background: #ffffff0a;
}

.mnav nav a[aria-current="true"] {
  color: var(--pearl);
  box-shadow: inset 3px 0 0 var(--aqua);
  background: #7fe8f014;
}

.mnav .btn {
  width: 100%;
  margin-top: 14px;
}

.top.menu-open {
  border-bottom-color: var(--line);
  background: #061519;
}

.hero {
  isolation: isolate;
  background: radial-gradient(70% 80% at 70% 48%,#15464e9e 0%,#0b262b66 45%,transparent 75%),linear-gradient(180deg,#0b252a 0%,#081d21 72%,var(--ink-1) 100%);
  padding-top: 72px;
  position: relative;
  overflow: hidden;
}

.hero:after {
  content: "";
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,#07191d00,var(--ink-1));
  height: 140px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.hero-light {
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(28% 36% at 63% 14%, #7fe8f01a, #0000 70%), radial-gradient(22% 30% at 86% 74%, #5acdd712, #0000 70%), radial-gradient(30% 26% at 14% 88%, #7fe8f00d, #0000 70%);
  animation: 28s ease-in-out infinite alternate drift;
  position: absolute;
  inset: -12%;
}

@keyframes drift {
  to {
    transform: translate3d(-2.5%, 1.5%, 0) scale(1.05);
  }
}

.hero-in {
  grid-template-rows: 1fr auto;
  grid-template-columns: clamp(380px, 33vw, 480px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 2vh, 24px) clamp(20px, 2.4vw, 40px);
  min-height: min(100svh - 72px, 900px);
  padding-block: clamp(12px, 2.5vh, 32px) clamp(20px, 3vh, 32px);
  display: grid;
}

.eyebrow {
  font: 500 12.5px/1.2 var(--body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--aqua);
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

.eyebrow i {
  background: var(--aqua);
  border-radius: 50%;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 12px 2px #7fe8f08c;
}

h1 {
  font: 400 clamp(30px,2.95vw,44px)/1.12 var(--display);
  letter-spacing: -.022em;
  text-wrap: balance;
  margin-top: 22px;
}

h1 span {
  color: var(--aqua-soft);
}

.lead {
  max-width: 42ch;
  color: var(--text-2);
  text-wrap: pretty;
  margin-top: 22px;
  font-size: clamp(16.5px, 1.2vw, 18px);
  line-height: 1.62;
}

.cta-row {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  display: flex;
}

.cta-row .btn {
  padding: 0 21px;
}

.chan-row {
  border-top: 1px solid var(--line);
  gap: 12px;
  max-width: 470px;
  margin-top: clamp(20px, 3.2vh, 48px);
  padding-top: 20px;
  display: grid;
}

.chan-label {
  font: 500 11.5px/1.3 var(--body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.chan-list {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.chan-list li {
  white-space: nowrap;
  height: 34px;
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--line);
  background: #ffffff0a;
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  font-size: 13.5px;
  display: inline-flex;
}

.chan-list .ib, .chan-list .ic {
  width: 16px;
  height: 16px;
}

.chan-list .ic {
  color: var(--aqua-soft);
}

.scene {
  --jh: clamp(460px,min(calc(100svh - 300px),46vw),640px);
  --cw: clamp(300px,24vw,350px);
  justify-content: center;
  align-items: center;
  min-width: 0;
  display: flex;
  position: relative;
}

.stage-col {
  flex-direction: column;
  flex: none;
  display: flex;
}

.jar {
  height: var(--jh);
  aspect-ratio: 1106 / 1264;
  flex: none;
  margin: 0;
  position: relative;
}

.jar-halo {
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, #174b53 0%, #14424a 56%, #11393f 66%, #0e30368c 80%, #0a242900 100%);
  transition: opacity .4s;
  position: absolute;
  inset: -22% -30%;
}

.av-halo {
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(closest-side, #15302f 0%, #11292c 50%, #0f262a99 74%, #0a1e2200 100%);
  transition: opacity .4s;
  position: absolute;
  inset: -18% -26%;
}

.jar[data-look="av"] .jar-halo {
  opacity: 0;
}

.jar[data-look="av"] .av-halo {
  opacity: 1;
}

.jar-floor {
  z-index: -1;
  pointer-events: none;
  filter: blur(6px);
  background: radial-gradient(closest-side, #7fe8f038, #7fe8f000);
  height: 9%;
  position: absolute;
  bottom: -4%;
  left: 6%;
  right: 6%;
}

.look {
  opacity: 0;
  position: absolute;
  inset: 0;
}

.jar.switching .look {
  transition: opacity .4s;
}

.look.on {
  opacity: 1;
}

.look video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.look-jar video {
  -webkit-mask-composite: source-in;
  -webkit-mask-image: linear-gradient(90deg, #0000 0, #000 5% 95%, #0000 100%), linear-gradient(#0000 0, #000 3.5% 97%, #0000 100%);
  mask-image: linear-gradient(90deg, #0000 0, #000 5% 95%, #0000 100%), linear-gradient(#0000 0, #000 3.5% 97%, #0000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.look-av video {
  object-position: 50% 0;
  -webkit-mask-composite: source-in;
  -webkit-mask-image: linear-gradient(#0000 0, #000 7% 76%, #0000 100%), linear-gradient(90deg, #0000 0, #000 11% 89%, #0000 100%);
  mask-image: linear-gradient(#0000 0, #000 7% 76%, #0000 100%), linear-gradient(90deg, #0000 0, #000 11% 89%, #0000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.jar-logo {
  opacity: .86;
  pointer-events: none;
  filter: drop-shadow(0 0 5px #78e6ff59);
  width: 16.1%;
  height: auto;
  position: absolute;
  top: 90.6%;
  left: 41.86%;
  transform: translateY(-50%);
}

.looks-bar {
  width: calc(var(--jh) * .875);
  justify-content: center;
  align-items: center;
  margin-top: 14px;
  display: flex;
}

.looks {
  flex: none;
  gap: 8px;
  display: flex;
}

.look-thumb {
  aspect-ratio: 4 / 5;
  cursor: pointer;
  width: 46px;
  box-shadow: 0 0 0 1px var(--line-2);
  background: #10262a;
  border: 0;
  border-radius: 10px;
  flex: none;
  padding: 0;
  transition: box-shadow .2s;
  position: relative;
  overflow: hidden;
}

.look-thumb img {
  object-fit: cover;
  object-position: 50% 18%;
  opacity: .6;
  width: 100%;
  height: 100%;
  transition: opacity .2s;
  display: block;
}

.look-thumb.jar-thumb img {
  object-position: 50% 44%;
  transform-origin: 50% 44%;
  transform: scale(1.8);
}

.look-thumb:hover img {
  opacity: .9;
}

.look-thumb[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--aqua),0 10px 24px -10px #7fe8f08c;
}

.look-thumb[aria-pressed="true"] img {
  opacity: 1;
}

.look-thumb:focus-visible {
  outline: 2px solid var(--pearl);
  outline-offset: 4px;
}

.convo {
  z-index: 3;
  width: var(--cw);
  margin-left: calc(var(--jh) * -.13);
  flex: none;
  gap: 12px;
  display: grid;
  position: relative;
}

.chat {
  height: clamp(420px,calc(var(--jh) * .66),500px);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  background: linear-gradient(#103036d1, #081b1feb);
  border-radius: 22px;
  flex-direction: column;
  display: flex;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #a0e6ec2b, inset 0 1px #ffffff17, 0 40px 90px -40px #000000d9, 0 0 70px -34px #7fe8f04d;
}

.chat-head {
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  display: flex;
}

.bank-mark {
  color: #04292e;
  background: linear-gradient(160deg, #e6f9f8, #a9dcdc);
  border-radius: 12px;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
  box-shadow: inset 0 1px #ffffff8c;
}

.bank-mark .ic {
  stroke-width: 2px;
  width: 19px;
  height: 19px;
}

.chat-who {
  min-width: 0;
  line-height: 1.25;
}

.chat-who b {
  font-size: 14.5px;
  font-weight: 600;
  display: block;
}

.chat-status {
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12.5px;
  transition: color .2s;
  display: block;
  overflow: hidden;
}

.chat-status.busy {
  color: var(--aqua);
}

.chat-chan {
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--line);
  white-space: nowrap;
  background: #ffffff0a;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 5px 9px;
  font-size: 11.5px;
  display: inline-flex;
}

.chat-chan .ic {
  width: 13px;
  height: 13px;
}

.chat-log {
  flex-direction: column;
  flex: 1;
  justify-content: flex-end;
  gap: 8px;
  min-height: 0;
  padding: 12px 13px 10px;
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#0000 0, #000 40px);
  mask-image: linear-gradient(#0000 0, #000 40px);
}

.chat-log > * {
  flex: none;
  transition: opacity .45s, transform .45s;
}

.chat-log > .leaving {
  opacity: 0;
  transform: translateY(-6px);
}

.day {
  color: var(--muted);
  background: #ffffff0a;
  border-radius: 999px;
  align-self: center;
  padding: 3px 10px;
  font-size: 11px;
}

.msg {
  overflow-wrap: break-word;
  border-radius: 16px;
  max-width: 88%;
  padding: 8px 11px 6px;
  font-size: 13.6px;
  line-height: 1.45;
}

.anim {
  animation: .34s cubic-bezier(.2, .8, .2, 1) both pop;
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }
}

.msg.out {
  color: #f2fbfa;
  background: #1f5d65;
  border-bottom-right-radius: 6px;
  align-self: flex-end;
}

.msg.out time {
  color: #f0faf9d6;
}

.msg.in {
  background: #fff1;
  border-bottom-left-radius: 6px;
  align-self: flex-start;
  box-shadow: inset 0 0 0 1px #a0e6ec1c;
}

.msg time {
  text-align: right;
  color: #e9f4f3b3;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
  font-size: 10.5px;
  display: block;
}

.who-tag {
  letter-spacing: .02em;
  color: var(--aqua);
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
}

.who-tag .ic {
  stroke-width: 2.2px;
  width: 12px;
  height: 12px;
}

.msg.human .who-tag {
  color: var(--pearl);
}

.msg.typing {
  gap: 4px;
  padding: 12px 13px;
  display: flex;
}

.msg.typing i {
  background: var(--text-2);
  opacity: .35;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  animation: 1.1s infinite blink;
}

.msg.typing i:nth-child(2) {
  animation-delay: .18s;
}

.msg.typing i:nth-child(3) {
  animation-delay: .36s;
}

@keyframes blink {
  40% {
    opacity: .95;
    transform: translateY(-2px);
  }
}

.sys {
  text-align: left;
  max-width: 96%;
  color: var(--amber);
  background: #ffd27a12;
  border-radius: 12px;
  align-self: center;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  font-size: 11.5px;
  line-height: 1.35;
  display: inline-flex;
  box-shadow: inset 0 0 0 1px #ffd27a38;
}

.sys .ic {
  stroke-width: 2px;
  width: 13px;
  height: 13px;
}

.sys.video {
  color: var(--aqua);
  background: #7fe8f012;
  box-shadow: inset 0 0 0 1px #7fe8f038;
}

.appt {
  background: #0313168c;
  border-radius: 12px;
  margin: 8px 0 3px;
  padding: 11px 12px 12px;
  box-shadow: inset 0 0 0 1px #a0e6ec29;
}

.pc-top {
  color: var(--muted);
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  display: flex;
}

.ok-state {
  color: var(--ok);
}

.ap-when {
  font: 500 17px/1.15 var(--display);
  letter-spacing: -.01em;
  margin-top: 6px;
}

.pc-desc {
  color: var(--text-2);
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.45;
}

.chat-compose {
  border-top: 1px solid var(--line);
  align-items: center;
  gap: 9px;
  padding: 10px 12px 12px;
  display: flex;
}

.field {
  white-space: nowrap;
  min-width: 0;
  height: 40px;
  box-shadow: inset 0 0 0 1px var(--line);
  background: #ffffff0d;
  border-radius: 999px;
  flex: 1;
  align-items: center;
  padding: 0 14px;
  font-size: 13.6px;
  display: flex;
  overflow: hidden;
}

.field .ph {
  color: var(--faint);
}

.field.typing {
  -webkit-mask-image: linear-gradient(90deg, #0000 6px, #000 30px);
  mask-image: linear-gradient(90deg, #0000 6px, #000 30px);
}

.field.typing:after {
  content: "";
  background: var(--aqua);
  flex: none;
  width: 1.5px;
  height: 17px;
  margin-left: 1px;
  animation: 1s step-end infinite caret;
}

@keyframes caret {
  50% {
    opacity: 0;
  }
}

.send {
  color: #04292e;
  background: var(--aqua);
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  transition: transform .2s;
  display: grid;
}

.send.hit {
  transform: scale(.88);
}

.send .ic {
  stroke-width: 2px;
  width: 17px;
  height: 17px;
}

.backstage {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  min-height: 116px;
  box-shadow: inset 0 0 0 1px var(--line);
  background: #051418b3;
  border-radius: 16px;
  padding: 12px 14px 13px;
}

.bs-label {
  font: 500 10.5px/1 var(--body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  align-items: center;
  gap: 8px;
  display: flex;
}

.bs-label:after {
  content: "";
  background: var(--line);
  flex: 1;
  height: 1px;
}

.bs-body {
  grid-template-columns: 32px 1fr;
  gap: 11px;
  margin-top: 11px;
  transition: opacity .22s, transform .22s;
  display: grid;
}

.bs-body.swap {
  opacity: 0;
  transform: translateY(4px);
}

.bs-ic {
  width: 32px;
  height: 32px;
  color: var(--aqua);
  background: #7fe8f01a;
  border-radius: 10px;
  place-items: center;
  display: grid;
  box-shadow: inset 0 0 0 1px #7fe8f038;
}

.bs-ic .ic {
  width: 17px;
  height: 17px;
}

.bs-body[data-tone="amber"] .bs-ic {
  color: var(--amber);
  background: #ffd27a1a;
  box-shadow: inset 0 0 0 1px #ffd27a42;
}

.bs-body[data-tone="pearl"] .bs-ic {
  color: var(--pearl);
  background: #effcfb14;
  box-shadow: inset 0 0 0 1px #effcfb38;
}

.bs-body[data-tone="ok"] .bs-ic {
  color: var(--ok);
  background: #6be3ac1a;
  box-shadow: inset 0 0 0 1px #6be3ac42;
}

.bs-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}

.bs-sub {
  color: var(--text-2);
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.45;
}

.proof {
  border-top: 1px solid var(--line);
  grid-column: 1 / -1;
  align-items: center;
  gap: 14px clamp(24px, 3vw, 48px);
  padding-top: 20px;
  display: flex;
}

.proof-label {
  font: 500 11.5px/1.3 var(--body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}

.clients {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px clamp(28px, 4vw, 64px);
  display: flex;
}

.client {
  align-items: center;
  min-height: 36px;
  display: flex;
}

.wordmark {
  font: 400 clamp(15px,1.25vw,18px)/1.1 var(--display);
  letter-spacing: .01em;
  white-space: nowrap;
  color: #d3e3e2;
}

.client-logo {
  width: auto;
  height: 28px;
  display: block;
}

.sec {
  --pt: clamp(72px,8vw,116px);
  padding-block: var(--pt);
  position: relative;
}

.sec:before {
  content: "";
  background: linear-gradient(90deg, #0000, #7fe8f038, #0000);
  width: min(1100px, 90%);
  height: 1px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

[id] {
  scroll-margin-top: 84px;
}

.sec[id] {
  scroll-margin-top: calc(92px - var(--pt));
}

.kicker {
  font: 500 12px/1.2 var(--body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--aqua);
  align-items: center;
  gap: 12px;
  display: inline-flex;
}

.kicker:before {
  content: "";
  opacity: .7;
  background: currentColor;
  width: 24px;
  height: 1px;
}

h2 {
  max-width: 24ch;
  font: 400 clamp(27px,3vw,44px)/1.14 var(--display);
  letter-spacing: -.02em;
  text-wrap: balance;
  margin-top: 20px;
}

h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.sec-lead {
  max-width: 62ch;
  color: var(--text-2);
  text-wrap: pretty;
  margin-top: 20px;
  font-size: clamp(16px, 1.15vw, 17.5px);
  line-height: 1.65;
}

.sec-head {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: end;
  gap: 24px 64px;
  display: grid;
}

.sec-head .sec-lead {
  margin-top: 0;
}

.panel {
  box-shadow: inset 0 0 0 1px var(--line),inset 0 1px 0 #ffffff0d;
  background: linear-gradient(#12343a80, #0a202580);
  border-radius: 24px;
  position: relative;
}

.panel h3 {
  font: 400 clamp(19px,1.6vw,23px)/1.2 var(--display);
  letter-spacing: -.01em;
}

.panel-p {
  color: var(--text-2);
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
}

.sec-tight {
  --pt: clamp(64px,7vw,100px);
}

.who {
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 44px;
  display: grid;
}

.who li {
  padding: 26px 26px 0 0;
}

.who li + li {
  border-left: 1px solid var(--line);
  padding-left: 26px;
}

.who h3 {
  margin-top: 16px;
  font-size: 17px;
}

.who p {
  color: var(--text-2);
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.6;
}

.tablet {
  aspect-ratio: 3 / 4.15;
  background: linear-gradient(145deg, #1b2427, #0a0f11 60%, #141c1f);
  border-radius: 30px;
  width: clamp(300px, 25vw, 370px);
  padding: 12px;
  position: relative;
  box-shadow: inset 0 0 0 1px #ffffff14, inset 0 0 0 2px #05090a, 0 50px 80px -40px #000000e6, 0 0 90px -30px #7fe8f040;
}

.t-screen {
  background: linear-gradient(#11363c 0%, #0e2f35 58%, #0a2328 100%);
  border-radius: 20px;
  flex-direction: column;
  align-items: center;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.t-screen:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(125deg, #ffffff12 0%, #0000 32%);
  position: absolute;
  inset: 0;
}

.t-status {
  color: #a9c2c3;
  justify-content: flex-end;
  align-self: stretch;
  align-items: center;
  gap: 7px;
  padding: 10px 14px 0;
  font-size: 10.5px;
  display: flex;
}

.t-status i {
  background: var(--ok);
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.t-status b {
  color: var(--text);
  font-weight: 500;
}

.brandmark {
  color: var(--text);
  align-items: center;
  gap: 9px;
  display: inline-flex;
}

.brandmark .bm-ic {
  background: linear-gradient(150deg, #e6a173, #b8683d);
  border-radius: 9px;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  display: grid;
  box-shadow: inset 0 1px #ffffff59;
}

.brandmark .bm-ic svg {
  fill: none;
  stroke: #fff6ef;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 18px;
  height: 18px;
}

.brandmark b {
  font: 500 15px/1 var(--display);
  letter-spacing: -.01em;
  text-transform: lowercase;
}

.chat-head .brandmark {
  min-width: 0;
}

.chat-head .chat-who b {
  font: 500 15px/1.1 var(--display);
  letter-spacing: -.01em;
  text-transform: lowercase;
}

.t-brand {
  justify-content: center;
  margin-top: 8px;
  display: flex;
}

.t-brand .brandmark .bm-ic {
  border-radius: 7px;
  width: 24px;
  height: 24px;
}

.t-brand .brandmark .bm-ic svg {
  width: 15px;
  height: 15px;
}

.t-brand .brandmark b {
  font-size: 13.5px;
}

.t-cta {
  z-index: 2;
  width: 86%;
  height: clamp(44px, 3.6vw, 50px);
  font: 600 clamp(11.5px,.95vw,13px)/1 var(--display);
  color: #231a04;
  background: #ffcf5a;
  border-radius: 13px;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  display: flex;
  position: relative;
  box-shadow: 0 10px 24px -10px #ffcf5a99;
}

.t-cta .ic {
  stroke-width: 2.2px;
  width: 16px;
  height: 16px;
}

#video {
  overflow-x: clip;
}

.vo {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(36px, 6vw, 104px);
  display: grid;
}

.vo .sec-lead {
  max-width: 46ch;
}

.vo-points {
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 32px;
  margin-top: 38px;
  padding-top: 30px;
  display: grid;
}

.vo-points li {
  grid-template-columns: 40px 1fr;
  align-items: start;
  gap: 14px;
  display: grid;
}

.vo-points b {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  display: block;
}

.vo-points span {
  color: var(--text-2);
  margin-top: 4px;
  font-size: 14.5px;
  line-height: 1.55;
  display: block;
}

.vo-stage {
  isolation: isolate;
  justify-content: center;
  display: flex;
  position: relative;
}

.vo-stage:before {
  content: "";
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, #18464e8c, #0f2c3240 60%, #0a1e2200);
  position: absolute;
  inset: -14% -30%;
}

.t-person {
  background: radial-gradient(120% 70% at 50% 78%, #132b2f 0%, #0f2427 52%, #0b1a1f 100%);
}

.t-person .t-brand {
  margin-top: 10px;
}

.t-portrait {
  aspect-ratio: 4 / 5;
  flex: none;
  width: 100%;
  margin-top: 10px;
  position: relative;
}

.t-portrait video {
  object-fit: cover;
  object-position: 50% 0;
  -webkit-mask-composite: source-in;
  width: 100%;
  height: 100%;
  transition: transform 1.5s cubic-bezier(.2, .7, .2, 1);
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#0000 0, #000 16%), linear-gradient(90deg, #0000 0, #000 9% 91%, #0000 100%);
  mask-image: linear-gradient(#0000 0, #000 16%), linear-gradient(90deg, #0000 0, #000 9% 91%, #0000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.js .t-portrait:not(.risen) video {
  transform: translateY(22%);
}

.r-ic {
  width: 40px;
  height: 40px;
  color: var(--aqua);
  background: #7fe8f012;
  border-radius: 13px;
  place-items: center;
  display: grid;
  box-shadow: inset 0 0 0 1px #7fe8f033;
}

.r-ic .ic {
  width: 19px;
  height: 19px;
}

.ws {
  box-shadow: inset 0 0 0 1px var(--line-2),0 60px 120px -60px #000000d9,0 0 120px -60px #7fe8f040;
  background: #0a2125;
  border-radius: 24px;
  margin-top: 56px;
  overflow: hidden;
}

.ws-bar {
  border-bottom: 1px solid var(--line);
  background: #ffffff05;
  align-items: center;
  gap: 18px;
  height: 58px;
  padding: 0 18px;
  display: flex;
}

.ws-bar img {
  width: 79px;
  height: 21px;
}

.ws-org {
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--line);
  background: #ffffff0a;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
}

.ws-org i {
  background: #e0b65a;
  border-radius: 2px;
  width: 8px;
  height: 8px;
}

.ws-search {
  height: 36px;
  color: var(--faint);
  box-shadow: inset 0 0 0 1px var(--line);
  background: #ffffff09;
  border-radius: 10px;
  flex: 0 300px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  font-size: 13px;
  display: flex;
}

.ws-search .ic {
  width: 15px;
  height: 15px;
}

.ws-me {
  color: var(--text-2);
  white-space: nowrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  font-size: 13px;
  display: flex;
}

.ws-me .on {
  color: var(--ok);
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.ws-me .on:before {
  content: "";
  background: currentColor;
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.me-ava {
  color: #04292e;
  background: #bfe9e6;
  border-radius: 50%;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 13px;
  font-weight: 600;
  display: grid;
}

.ws-grid {
  grid-template-columns: 288px minmax(0, 1fr) 300px;
  height: 760px;
  display: grid;
}

.ws-list {
  border-right: 1px solid var(--line);
  flex-direction: column;
  min-height: 0;
  display: flex;
}

.ws-tabs {
  gap: 6px;
  padding: 14px 14px 10px;
  display: flex;
}

.ws-tabs span {
  color: var(--text-2);
  white-space: nowrap;
  border-radius: 9px;
  padding: 6px 10px;
  font-size: 12.5px;
}

.ws-tabs span b {
  color: var(--muted);
  margin-left: 4px;
  font-weight: 600;
}

.ws-tabs .cur {
  color: var(--text);
  background: #7fe8f01a;
  box-shadow: inset 0 0 0 1px #7fe8f038;
}

.ws-tabs .cur b {
  color: var(--aqua);
}

.ws-rows {
  align-content: start;
  display: grid;
  overflow: hidden;
}

.ws-rows li {
  border-left: 2px solid #0000;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  padding: 11px 14px;
  display: grid;
}

.ws-rows li.sel {
  border-left-color: var(--aqua);
  background: #7fe8f00f;
}

.initials {
  width: 42px;
  height: 42px;
  color: var(--text);
  background: linear-gradient(160deg, #245d66, #173f46);
  border-radius: 50%;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  display: grid;
  position: relative;
}

.initials .badge {
  background: #0b2328;
  border-radius: 50%;
  place-items: center;
  width: 18px;
  height: 18px;
  display: grid;
  position: absolute;
  bottom: -4px;
  right: -5px;
  box-shadow: 0 0 0 2px #0b2328;
}

.initials .badge .ib, .initials .badge .ic {
  width: 13px;
  height: 13px;
}

.initials .badge .ic {
  stroke-width: 2px;
  color: var(--aqua);
}

.ws-rows .initials {
  width: 38px;
  height: 38px;
  font-size: 13px;
}

.r-top {
  justify-content: space-between;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
}

.r-top time {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 400;
}

.r-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
  font-size: 12.8px;
  overflow: hidden;
}

.r-meta {
  margin-top: 6px;
}

.tag {
  white-space: nowrap;
  color: var(--aqua);
  background: #7fe8f017;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 500;
  display: inline-flex;
  box-shadow: inset 0 0 0 1px #7fe8f033;
}

.tag.t-pearl {
  color: var(--pearl);
  background: #effcfb12;
  box-shadow: inset 0 0 0 1px #effcfb33;
}

.tag.t-amber {
  color: var(--amber);
  background: #ffd27a14;
  box-shadow: inset 0 0 0 1px #ffd27a3d;
}

.tag.t-ok {
  color: var(--ok);
  background: #6be3ac14;
  box-shadow: inset 0 0 0 1px #6be3ac3d;
}

.ws-conv {
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.conv-head {
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  display: flex;
}

.conv-head .initials {
  width: 36px;
  height: 36px;
  font-size: 13px;
}

.conv-head .who b {
  font-size: 14.5px;
  display: block;
}

.conv-head .who span {
  color: var(--muted);
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: inline-flex;
}

.conv-head .who .ic {
  width: 13px;
  height: 13px;
}

.conv-actions {
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.mini-btn {
  white-space: nowrap;
  height: 32px;
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--line);
  background: #ffffff0a;
  border-radius: 9px;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 500;
  display: inline-flex;
}

.mini-btn .ic {
  width: 14px;
  height: 14px;
}

.mini-btn.solid {
  color: #04292e;
  background: var(--aqua);
  box-shadow: none;
}

.conv-log {
  flex-direction: column;
  flex: 1;
  justify-content: flex-end;
  gap: 9px;
  min-height: 0;
  padding: 14px 22px;
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#0000 0, #000 36px);
  mask-image: linear-gradient(#0000 0, #000 36px);
}

.op {
  gap: 4px;
  max-width: 72%;
  display: grid;
}

.op.c {
  align-self: flex-start;
}

.op.us {
  align-self: flex-end;
  justify-items: end;
}

.op-meta {
  color: var(--muted);
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  display: inline-flex;
}

.op-meta .ic {
  width: 13px;
  height: 13px;
  color: var(--aqua);
}

.op-meta time {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.op p {
  border-radius: 15px;
  padding: 9px 13px;
  font-size: 14px;
  line-height: 1.5;
}

.op.c p {
  box-shadow: inset 0 0 0 1px var(--line);
  background: #ffffff0f;
  border-top-left-radius: 5px;
}

.op.ai p {
  background: #7fe8f017;
  border-top-right-radius: 5px;
  box-shadow: inset 0 0 0 1px #7fe8f038;
}

.op.mgr p {
  background: #1f5d65;
  border-top-right-radius: 5px;
}

.src {
  color: var(--muted);
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  display: inline-flex;
}

.src .ic {
  width: 12px;
  height: 12px;
}

.handoff {
  align-self: stretch;
  gap: 10px;
  margin: 4px 0;
  display: grid;
}

.ho-line {
  color: var(--amber);
  white-space: nowrap;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  display: flex;
}

.ho-line:before, .ho-line:after {
  content: "";
  background: linear-gradient(90deg, #0000, #ffd27a59);
  flex: 1;
  height: 1px;
}

.ho-line:after {
  background: linear-gradient(90deg, #ffd27a59, #0000);
}

.ho-line.video {
  color: var(--aqua);
}

.ho-line.video:before {
  background: linear-gradient(90deg, #0000, #7fe8f059);
}

.ho-line.video:after {
  background: linear-gradient(90deg, #7fe8f059, #0000);
}

.ho-line .ic {
  width: 14px;
  height: 14px;
}

.summary {
  background: #ffd27a0e;
  border-radius: 14px;
  max-width: 560px;
  margin-inline: auto;
  padding: 13px 15px;
  box-shadow: inset 0 0 0 1px #ffd27a33;
}

.summary b {
  font: 500 11px/1.3 var(--body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber);
  display: block;
}

.summary p {
  color: var(--text);
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.55;
}

.summary p + p {
  color: var(--text-2);
  margin-top: 4px;
}

.ws-suggest {
  background: #7fe8f00f;
  border-radius: 14px;
  margin: 0 18px;
  padding: 11px 13px;
  box-shadow: inset 0 0 0 1px #7fe8f033;
}

.sg-top {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.sg-label {
  color: var(--aqua);
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.sg-label .ic {
  width: 14px;
  height: 14px;
}

.sg-actions {
  gap: 6px;
  display: flex;
}

.ws-suggest p {
  color: var(--text);
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.5;
}

.ws-compose {
  align-items: center;
  gap: 10px;
  padding: 12px 18px 16px;
  display: flex;
}

.ws-side {
  border-left: 1px solid var(--line);
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  padding: 18px;
  display: flex;
  overflow: hidden;
}

.cust {
  align-items: center;
  gap: 12px;
  display: flex;
}

.cust .initials {
  width: 46px;
  height: 46px;
  font-size: 15px;
}

.cust b {
  font-size: 15px;
  display: block;
}

.cust .meta {
  color: var(--muted);
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  display: inline-flex;
}

.cust .meta .ic {
  width: 13px;
  height: 13px;
}

.side-h {
  font: 500 11px/1.3 var(--body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.side-h em {
  letter-spacing: 0;
  text-transform: none;
  color: var(--faint);
  font-size: 11.5px;
  font-style: normal;
}

.order {
  box-shadow: inset 0 0 0 1px var(--line);
  background: #ffffff09;
  border-radius: 14px;
  margin-top: 9px;
  padding: 13px;
}

.o-top {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
}

.o-lines {
  color: var(--text-2);
  gap: 6px;
  margin-top: 10px;
  font-size: 12.8px;
  display: grid;
}

.o-lines div {
  justify-content: space-between;
  gap: 10px;
  display: flex;
}

.o-lines div span:first-child {
  color: var(--muted);
}

.o-lines div span:last-child {
  text-align: right;
}

.order .mini-btn {
  justify-content: center;
  width: 100%;
  height: 34px;
  margin-top: 12px;
}

.chips {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
  display: flex;
}

.chips span {
  color: var(--text-2);
  background: #ffffff0b;
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 12px;
}

.log {
  gap: 9px;
  margin-top: 9px;
  display: grid;
}

.log li {
  color: var(--text-2);
  grid-template-columns: 40px 1fr;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  display: grid;
}

.log time {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.feats {
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 56px;
  display: grid;
}

.feats li {
  padding: 26px 26px 0 0;
}

.feats li + li {
  border-left: 1px solid var(--line);
  padding-left: 26px;
}

.feats .ic {
  width: 22px;
  height: 22px;
  color: var(--aqua);
}

.feats h3 {
  margin-top: 16px;
  font-size: 16.5px;
}

.feats p {
  color: var(--text-2);
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.6;
}

.path {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin-top: 48px;
  display: grid;
  position: relative;
}

.path:before {
  content: "";
  background: linear-gradient(90deg, #7fe8f099, #7fe8f040 60%, #6be3ac80);
  height: 1px;
  position: absolute;
  top: 21px;
  left: 22px;
  right: 22px;
}

.path li {
  flex-direction: column;
  display: flex;
  position: relative;
}

.p-num {
  width: 44px;
  height: 44px;
  font: 500 15px/1 var(--display);
  color: var(--aqua);
  box-shadow: inset 0 0 0 1px #7fe8f066,0 0 0 6px var(--ink-1),0 0 24px -4px #7fe8f073;
  background: #0a2227;
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: relative;
}

.path li:last-child .p-num {
  color: var(--ok);
  box-shadow: inset 0 0 0 1px #6be3ac73,0 0 0 6px var(--ink-1),0 0 24px -4px #6be3ac73;
}

.path h3 {
  margin-top: 22px;
  font-size: 17px;
}

.path p {
  color: var(--text-2);
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.6;
}

.p-ui {
  margin-top: auto;
  padding-top: 22px;
}

.chip-ui {
  max-width: 100%;
  box-shadow: inset 0 0 0 1px var(--line);
  background: #ffffff0d;
  border-radius: 13px;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.35;
  display: inline-flex;
}

.chip-ui .ib, .chip-ui .ic {
  width: 16px;
  height: 16px;
}

.chip-ui .ic.pearl {
  color: var(--pearl);
}

.chip-ui.bubble {
  border-bottom-left-radius: 4px;
}

.chip-ui.ai {
  color: var(--text);
  background: #7fe8f014;
  box-shadow: inset 0 0 0 1px #7fe8f038;
}

.chip-ui.ai .ic {
  color: var(--aqua);
}

.chip-ui.ok {
  color: var(--ok);
  background: #6be3ac12;
  box-shadow: inset 0 0 0 1px #6be3ac40;
}

.bridge {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  margin-top: 44px;
  display: grid;
}

.br-box {
  box-shadow: inset 0 0 0 1px var(--line);
  background: linear-gradient(#12343a80, #0a202580);
  border-radius: 22px;
  padding: 24px 26px;
}

.br-box.iron {
  background: linear-gradient(#7fe8f017, #7fe8f008);
  box-shadow: inset 0 0 0 1px #7fe8f042;
}

.br-h {
  align-items: center;
  gap: 10px;
  display: flex;
}

.br-h img {
  width: 79px;
  height: 21px;
}

.br-h b {
  font: 400 18px/1.2 var(--display);
}

.br-h .bank-mark {
  border-radius: 10px;
  width: 34px;
  height: 34px;
}

.br-h .bank-mark .ic {
  width: 17px;
  height: 17px;
}

.br-box ul {
  gap: 12px;
  margin-top: 18px;
  display: grid;
}

.br-box li {
  color: var(--text-2);
  grid-template-columns: 20px 1fr;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  display: grid;
}

.br-box li .ic {
  width: 18px;
  height: 18px;
  color: var(--aqua-soft);
  margin-top: 2px;
}

.br-box li b {
  color: var(--text);
  font-weight: 600;
  display: block;
}

.br-mid {
  justify-items: center;
  gap: 10px;
  display: grid;
}

.br-arrow {
  white-space: nowrap;
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--line);
  background: #ffffff0a;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  font-size: 12.5px;
  display: inline-flex;
}

.br-arrow .ic {
  width: 15px;
  height: 15px;
  color: var(--aqua);
}

.br-arrow.back .ic {
  transform: rotate(180deg);
}

.br-note {
  color: var(--muted);
  margin-top: 20px;
  font-size: 14px;
}

.secu {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 80px);
  display: grid;
}

.secu-list {
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.secu-list li {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 26px 24px 26px 0;
  display: grid;
}

.secu-list li:nth-child(2n) {
  border-left: 1px solid var(--line);
  padding-left: 24px;
  padding-right: 0;
}

.secu-list li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.s-ic {
  width: 44px;
  height: 44px;
  color: var(--aqua);
  background: #7fe8f012;
  border-radius: 14px;
  place-items: center;
  display: grid;
  box-shadow: inset 0 0 0 1px #7fe8f033;
}

.s-ic .ic {
  width: 21px;
  height: 21px;
}

.secu-list h3 {
  font-size: 16.5px;
}

.secu-list p {
  color: var(--text-2);
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.6;
}

.faq {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 80px);
  display: grid;
}

.qa {
  border-top: 1px solid var(--line);
}

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

.qa summary {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 21px 0;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  display: flex;
}

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

.qa summary:after {
  content: "";
  border-right: 2px solid var(--aqua);
  border-bottom: 2px solid var(--aqua);
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  transition: transform .2s;
  transform: translateY(-3px) rotate(45deg);
}

.qa details[open] summary:after {
  transform: translateY(2px) rotate(-135deg);
}

.qa summary:hover {
  color: var(--pearl);
}

.qa details p {
  max-width: 64ch;
  color: var(--text-2);
  padding: 0 40px 22px 0;
  font-size: 15px;
  line-height: 1.65;
}

.connect {
  background: radial-gradient(55% 70% at 78% 40%,#16485080,transparent 70%),linear-gradient(180deg,var(--ink-1),#082024);
  position: relative;
  overflow: hidden;
}

.cn-grid {
  grid-template: "intro form"
                 "steps form" 1fr
                 / minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: start;
  gap: 0 clamp(32px, 6vw, 96px);
  display: grid;
}

.cn-intro {
  grid-area: intro;
}

.steps {
  grid-area: steps;
  margin-top: 40px;
  display: grid;
}

.form-card {
  grid-area: form;
}

.steps li {
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding-bottom: 26px;
  display: grid;
  position: relative;
}

.steps li:not(:last-child):before {
  content: "";
  background: linear-gradient(#7fe8f066, #7fe8f014);
  width: 1px;
  position: absolute;
  top: 46px;
  bottom: 4px;
  left: 21.5px;
}

.steps .p-num {
  width: 44px;
  height: 44px;
  font-size: 14px;
  box-shadow: inset 0 0 0 1px #7fe8f059;
}

.steps h3 {
  margin-top: 10px;
  font-size: 16.5px;
}

.steps p {
  color: var(--text-2);
  margin-top: 5px;
  font-size: 14.5px;
  line-height: 1.6;
}

.foot {
  padding-block: 56px calc(36px + env(safe-area-inset-bottom, 0px));
  background: var(--ink-0);
  border-top: 1px solid var(--line);
}

.foot-in {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 32px 64px;
  display: grid;
}

.foot img {
  width: 118px;
  height: 31px;
}

.foot p {
  max-width: 52ch;
  color: var(--muted);
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.6;
}

.foot nav {
  grid-template-columns: repeat(2, auto);
  gap: 10px 40px;
  display: grid;
}

.foot nav a {
  color: var(--text-2);
  font-size: 14.5px;
  text-decoration: none;
}

.foot nav a:hover {
  color: var(--text);
}

.foot-bottom {
  border-top: 1px solid var(--line);
  color: var(--faint);
  grid-column: 1 / -1;
  padding-top: 24px;
  font-size: 13px;
}

@media (max-width: 1199px) {
  .nav, .top-actions .login-open {
    display: none;
  }

  .top-actions {
    margin-left: auto;
  }

  .menu-btn {
    display: grid;
  }
}

@media (max-width: 1240px) {
  .ws-grid {
    grid-template-columns: minmax(0, 1fr) 290px;
  }

  .ws-list {
    display: none;
  }

  .feats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feats li:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }

  .feats li:nth-child(n+3) {
    border-top: 1px solid var(--line);
    margin-top: 26px;
  }

  .who {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .who li:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }

  .who li:nth-child(n+3) {
    border-top: 1px solid var(--line);
    margin-top: 26px;
  }
}

@media (max-width: 1100px) {
  .vo {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .vo-points {
    grid-template-columns: 1fr;
  }

  .hero-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 32px;
    min-height: 0;
    padding-block: 24px 64px;
  }

  .hero-copy {
    grid-area: 1 / 1;
    padding-top: clamp(24px, 6vh, 64px);
  }

  .scene {
    grid-area: 1 / 2 / span 2;
  }

  .proof {
    flex-direction: column;
    grid-area: 2 / 1;
    align-self: start;
    align-items: flex-start;
    padding-top: 18px;
  }

  .scene {
    --jh: auto;
    --jw: min(80%,380px);
    flex-direction: column;
    align-items: center;
  }

  .jar {
    width: var(--jw);
    height: auto;
  }

  .jar-halo {
    inset: -14% -24%;
  }

  .av-halo {
    inset: -12% -20%;
  }

  .stage-col {
    align-items: center;
    width: 100%;
  }

  .looks-bar {
    width: var(--jw);
  }

  .convo {
    width: min(100%, 420px);
    margin: 20px 0 0;
  }

  .chat {
    height: 420px;
  }

  .sec-head, .secu, .faq {
    grid-template-columns: 1fr;
  }

  .cn-grid {
    grid-template-rows: none;
    grid-template-columns: 1fr;
    grid-template-areas: "intro"
                         "form"
                         "steps";
  }

  .form-card {
    margin-top: 32px;
  }

  .steps {
    margin-top: 48px;
  }

  .path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 44px;
  }

  .path:before {
    display: none;
  }
}

@media (max-width: 860px) {
  .vo {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    display: flex;
  }

  .vo-copy {
    display: contents;
  }

  .vo-copy .kicker {
    order: 1;
    align-self: flex-start;
  }

  .vo-copy h2 {
    order: 2;
  }

  .vo-copy .sec-lead {
    order: 3;
  }

  .vo-stage {
    order: 4;
    margin-top: 32px;
  }

  .vo-points {
    order: 5;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ws-grid {
    grid-template-columns: 1fr;
    height: auto;
  }

  .ws-side {
    display: none;
  }

  .conv-log {
    flex: none;
    height: 600px;
  }

  .ws-search {
    display: none;
  }

  .hero-in {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: 18px 56px;
    display: flex;
  }

  .hero-copy {
    display: contents;
  }

  .eyebrow {
    order: 1;
    align-self: flex-start;
  }

  h1 {
    order: 2;
    max-width: 640px;
  }

  .lead {
    order: 3;
  }

  .cta-row {
    order: 4;
  }

  .proof {
    order: 5;
    gap: 12px;
    margin-top: 30px;
  }

  .scene {
    --jw: min(82%,380px);
    order: 6;
    margin-top: 40px;
  }

  .chan-row {
    order: 7;
    max-width: none;
  }

  .convo {
    width: 100%;
    max-width: 460px;
  }

  .chat, .backstage {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .chat {
    background: linear-gradient(#0f2e34, #081c20);
  }

  .backstage {
    background: #051418f0;
  }

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

  .br-mid {
    grid-auto-flow: column;
    justify-content: center;
  }

  .br-arrow .ic {
    transform: rotate(90deg);
  }

  .br-arrow.back .ic {
    transform: rotate(-90deg);
  }
}

@media (max-width: 760px) {
  h1 {
    margin-top: 16px;
  }

  .lead {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.55;
  }

  .cta-row {
    margin-top: 22px;
  }

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

  .proof {
    flex-direction: column;
    align-items: stretch;
  }

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

  .client {
    text-align: center;
    min-height: 52px;
    box-shadow: inset 0 0 0 1px var(--line);
    background: #ffffff08;
    border-radius: 14px;
    justify-content: center;
    padding: 0 4px;
  }

  .wordmark {
    white-space: normal;
    font-size: 12.5px;
  }

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

  .who li, .who li + li, .who li:nth-child(n) {
    border-left: 0;
    margin-top: 0;
    padding: 22px 0 0;
  }

  .who li + li {
    border-top: 1px solid var(--line);
    margin-top: 22px;
  }

  .feats li, .feats li + li, .feats li:nth-child(n) {
    border-left: 0;
    margin-top: 0;
    padding: 22px 0 0;
  }

  .feats li + li {
    border-top: 1px solid var(--line);
    margin-top: 22px;
  }

  .path {
    grid-template-columns: 1fr;
    row-gap: 0;
    margin-top: 44px;
  }

  .path li {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 18px;
    padding-bottom: 34px;
    display: grid;
  }

  .path li > :not(.p-num) {
    grid-column: 2;
  }

  .path li .p-num {
    grid-row: 1 / span 3;
  }

  .path li:not(:last-child):before {
    content: "";
    background: linear-gradient(#7fe8f073, #7fe8f01a);
    width: 1px;
    position: absolute;
    top: 50px;
    bottom: 6px;
    left: 21.5px;
  }

  .path h3 {
    margin-top: 10px;
  }

  .p-ui {
    padding-top: 14px;
  }

  .bridge {
    margin-top: 8px;
  }

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

  .secu-list li, .secu-list li:nth-child(2n) {
    border-left: 0;
    padding: 22px 0;
  }

  .qa details p {
    padding-right: 0;
  }

  .foot-in {
    grid-template-columns: 1fr;
  }

  .conv-head .conv-actions .mini-btn:not(.solid) {
    display: none;
  }

  .conv-log {
    height: auto;
    padding: 14px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .op {
    max-width: 88%;
  }

  .ws-bar {
    gap: 12px;
    padding: 0 14px;
  }

  .ws-me .on, .ws-me .name {
    display: none;
  }

  .ws-suggest {
    margin: 0 14px;
  }

  .sg-top {
    flex-wrap: wrap;
  }

  .ws-compose {
    padding: 12px 14px 14px;
  }
}

@media (max-width: 420px) {
  .cta-row .btn {
    flex: 100%;
  }

  .top-actions .btn {
    min-height: 38px;
    padding: 0 13px;
    font-size: 13.5px;
  }

  .top-actions {
    gap: 8px;
  }

  .menu-btn {
    width: 38px;
    height: 38px;
  }

  .tablet {
    width: min(100%, 320px);
  }

  .vo-points {
    grid-template-columns: 1fr;
  }

  .brand img {
    width: 90px;
    height: 24px;
  }

  h1 {
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js .chat-log > [data-after-first] {
    display: none;
  }
}

.mnav-lang {
  color: var(--text-2);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-left: 14px;
  font-size: 15px;
  display: none;
}

@media (max-width: 639px) {
  .top-actions .lang {
    display: none;
  }

  .mnav-lang {
    display: flex;
  }
}

.nf {
  align-content: center;
  min-height: calc(100svh - 72px);
  padding-top: 72px;
  display: grid;
}

.nf .cta-row {
  margin-top: 30px;
}

.log li {
  grid-template-columns: minmax(40px, max-content) 1fr;
}

.log time {
  white-space: nowrap;
}

/*# sourceMappingURL=src_0m6ln28gi0-gx._.css.map*/