@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("./fonts/unbounded-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("./fonts/unbounded-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --page: #f2f3f5;
  --white: #ffffff;
  --ink: #111318;
  --ink-soft: #22252c;
  --muted: #606570;
  --line: #dfe1e6;
  --line-dark: rgba(255, 255, 255, .12);
  --blue: #315cf6;
  --blue-dark: #2446c9;
  --blue-soft: #e4e9ff;
  --violet: #7d5cff;
  --violet-soft: #e9e3ff;
  --coral: #ff664d;
  --lime: #c8f56f;
  --danger: #c33a52;
  --content-max: 1440px;
  --page-x: max(clamp(20px, 4.8vw, 76px), calc((100vw - var(--content-max)) / 2));
  --section-y: clamp(88px, 10vw, 156px);
  --section-top-compact: clamp(72px, 7.5vw, 116px);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--page);
  color: var(--ink);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
textarea {
  font: inherit;
}

a {
  color: inherit;
}

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

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 55%, transparent);
  outline-offset: 3px;
}

.site-header {
  min-height: 76px;
  padding: 0 var(--page-x);
  border-bottom: 1px solid var(--line);
  background: rgba(242, 243, 245, .96);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.brand {
  justify-self: start;
  font-family: "Unbounded", sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.04em;
  text-decoration: none;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 46px);
}

.main-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: #414650;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

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

.header-action {
  justify-self: end;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 12% 8%, rgba(143, 246, 224, .72) 0, transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(255, 151, 128, .7) 0, transparent 38%),
    linear-gradient(110deg, #159bc0 0%, #315cf6 48%, #7d5cff 100%);
  color: white;
  box-shadow: 0 12px 30px rgba(49, 92, 246, .2);
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  transition: transform 220ms ease;
}

.action-icon {
  width: 24px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease;
}

.header-action .action-icon {
  color: white;
}

.header-action:hover {
  transform: translateY(-2px);
}

.header-action:hover .action-icon,
.button:hover .action-icon {
  transform: translateX(3px);
}

.hero {
  position: relative;
  min-height: 720px;
  padding: clamp(76px, 9vh, 118px) var(--page-x) 0;
  overflow: hidden;
  background: var(--page);
  display: flex;
  flex-direction: column;
}

.hero-copy {
  position: relative;
  z-index: 1;
  width: min(1040px, 100%);
}

.overline {
  margin: 0;
  color: var(--blue);
  font-family: "Unbounded", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .045em;
  line-height: 1.4;
  text-transform: uppercase;
}

.hero h1,
.section-heading h2,
.scale-intro h2,
.foundation-heading h2,
.care-copy h2,
.admin-copy h2,
.ai-copy h2,
.integration-section h2,
.backup-copy h2,
.turnkey-copy h2 {
  font-weight: 720;
  letter-spacing: -.062em;
  text-wrap: balance;
}

.hero h1 {
  margin: 25px 0 0;
  font-size: clamp(52px, 5.8vw, 84px);
  line-height: .96;
}

.hero h1 span {
  color: var(--blue);
}

.hero-lead {
  max-width: 760px;
  margin: 34px 0 0;
  color: #454a54;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.54;
  text-wrap: pretty;
}

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

.button {
  min-height: 54px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  transition: transform 220ms ease;
}

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

.button-primary {
  background: var(--blue);
  color: white;
}

.button-primary:hover {
  background: var(--blue-dark);
}

.button-quiet,
.button-secondary {
  border-color: #cfd2d9;
  background: transparent;
  color: var(--ink);
}

.button-quiet:hover,
.button-secondary:hover {
  border-color: var(--ink);
  background: white;
}

.usage-modes {
  position: relative;
  z-index: 1;
  width: min(1020px, 100%);
  margin-top: clamp(72px, 8vw, 112px);
  margin-bottom: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
}

.usage-modes > li {
  min-width: 0;
  min-height: 82px;
  padding: 0 clamp(18px, 2.2vw, 32px);
  border-left: 1px solid var(--line);
  display: flex;
  align-items: center;
}

.usage-modes > li:first-child {
  border-left: 0;
}

.usage-modes p {
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.usage-modes strong {
  color: #343943;
  font-size: 13px;
  font-weight: 700;
}

.usage-modes small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.benefits-section {
  scroll-margin-top: 24px;
  padding: var(--section-y) var(--page-x);
  background: #e7e9ed;
}

.benefits-section .overline,
.pricing-section .overline {
  color: var(--blue-dark);
}

.section-heading {
  max-width: 900px;
}

.section-key {
  min-height: 116px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.section-key > p:last-child {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.75;
}

.section-heading h2 {
  max-width: 850px;
  margin: 0;
  font-size: clamp(42px, 4.6vw, 64px);
  line-height: 1.03;
}

.section-heading .overline + h2 {
  margin-top: 22px;
}

.section-lead {
  max-width: 700px;
  margin: 25px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}

.benefit-grid {
  margin-top: clamp(54px, 7vw, 98px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.benefit {
  min-height: 350px;
  padding: clamp(25px, 3vw, 42px);
  border: 1px solid rgba(17, 19, 24, .055);
  border-radius: var(--radius-md);
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(20px, 1.8vw, 26px);
}

.benefit svg {
  width: 56px;
  height: 56px;
  padding: 9px;
  border-radius: 15px;
  background: var(--blue-soft);
  color: var(--blue);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.benefit:nth-child(2) svg {
  background: var(--violet-soft);
  color: var(--violet);
}

.benefit:nth-child(3) svg {
  background: #ffe5df;
  color: var(--coral);
}

.benefit h3 {
  max-width: 420px;
  margin: 0;
  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.13;
  letter-spacing: -.035em;
}

.benefit p {
  max-width: 440px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.58;
}

.scale-section {
  scroll-margin-top: 24px;
  padding: var(--section-top-compact) var(--page-x) var(--section-y);
  background: var(--white);
}

.scale-intro {
  display: grid;
  grid-template-columns: minmax(260px, .56fr) minmax(0, 1.44fr);
  column-gap: clamp(40px, 7vw, 112px);
}

.scale-copy {
  grid-column: 1 / -1;
  max-width: 960px;
}

.scale-copy .overline {
  margin-bottom: 22px;
}

.scale-intro h2 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(42px, 4.6vw, 64px);
  line-height: 1.03;
  text-wrap: balance;
}

.gradient-word {
  color: var(--blue);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-growth {
  background-image: linear-gradient(105deg, #ef476f 0%, #b44cff 38%, #5867ff 68%, #008fb3 100%);
}

.gradient-system {
  background-image: linear-gradient(100deg, #ff9c86 0%, #b696ff 50%, #61baff 100%);
}

.scale-path {
  margin-top: clamp(60px, 8vw, 110px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.scale-path article {
  min-height: 290px;
  padding: 30px clamp(20px, 3vw, 44px) 32px;
  display: flex;
  flex-direction: column;
}

.scale-path article:first-child {
  padding-left: 0;
}

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

.scale-tag {
  width: max-content;
  padding: 7px 10px;
  border-radius: 7px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-family: "Unbounded", sans-serif;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.scale-path article:nth-child(2) .scale-tag {
  background: var(--violet-soft);
  color: #6244d8;
}

.scale-path article:nth-child(3) .scale-tag {
  background: #ffe2dc;
  color: #a93624;
}

.scale-path h3 {
  margin: 30px 0 0;
  font-size: 25px;
  line-height: 1.16;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.scale-path p {
  margin: 16px 0 44px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.foundation-section {
  position: relative;
  padding: var(--section-y) var(--page-x);
  overflow: hidden;
  background: var(--ink);
  color: white;
  isolation: isolate;
}

.foundation-section::before,
.foundation-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.foundation-section::before {
  z-index: -2;
  inset: 28% -12% -34% -18%;
  background:
    radial-gradient(ellipse at 25% 82%, rgba(229, 68, 171, .25) 0, transparent 56%),
    radial-gradient(ellipse at 68% 86%, rgba(73, 88, 255, .18) 0, transparent 54%);
  filter: blur(34px);
}

.foundation-section::after {
  z-index: -1;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.78'/%3E%3C/svg%3E");
  opacity: .075;
  mix-blend-mode: soft-light;
}

.foundation-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, .56fr) minmax(0, 1.44fr);
  gap: clamp(40px, 7vw, 112px);
}

.foundation-heading h2 {
  grid-column: 1 / -1;
  max-width: 940px;
  margin: 0;
  font-size: clamp(40px, 4.3vw, 60px);
  line-height: 1.04;
}

.foundation-grid {
  position: relative;
  z-index: 1;
  margin-top: clamp(68px, 8vw, 116px);
  border-top: 1px solid var(--line-dark);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.foundation-grid article {
  min-height: 290px;
  padding: 26px clamp(18px, 2.5vw, 34px) 28px;
  display: flex;
  flex-direction: column;
}

.foundation-grid article:first-child {
  padding-left: 0;
}

.foundation-grid article + article {
  border-left: 1px solid var(--line-dark);
}

.foundation-grid span {
  color: #858b96;
  font-family: "Unbounded", sans-serif;
  font-size: 10px;
}

.foundation-grid h3 {
  max-width: 260px;
  margin: auto 0 0;
  font-size: 21px;
  line-height: 1.22;
  letter-spacing: -.028em;
}

.foundation-grid p {
  margin: 14px 0 0;
  color: #a9adb6;
  font-size: 13px;
  line-height: 1.55;
}

.experience-note {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 64px 0 0 auto;
  color: #d6d8dd;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.35;
  letter-spacing: -.025em;
}

.care-section {
  position: relative;
  padding: var(--section-y) var(--page-x);
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 8%, rgba(48, 224, 226, .88) 0, transparent 29%),
    radial-gradient(circle at 92% 14%, rgba(255, 105, 178, .72) 0, transparent 32%),
    radial-gradient(circle at 72% 94%, rgba(136, 72, 255, .88) 0, transparent 38%),
    linear-gradient(135deg, #1767e7 0%, #3f4bed 48%, #7041df 100%);
  color: white;
  isolation: isolate;
}

.care-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.72'/%3E%3C/svg%3E");
  opacity: .07;
  mix-blend-mode: soft-light;
}

.care-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(420px, 650px) minmax(480px, 620px);
  gap: clamp(56px, 6vw, 96px);
  align-items: center;
  justify-content: center;
}

.care-copy {
  max-width: 650px;
}

.care-copy .overline {
  color: #d8fffb;
}

.care-copy h2 {
  max-width: 650px;
  margin: 24px 0 0;
  font-size: clamp(44px, 4.5vw, 64px);
  line-height: 1.01;
}

.care-copy > p:not(.overline) {
  max-width: 620px;
  margin: 30px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: 18px;
  line-height: 1.62;
  text-wrap: pretty;
}

.care-console {
  min-width: 0;
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 30px;
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(37, 23, 111, .18);
  backdrop-filter: blur(18px);
}

.care-console-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.care-console-head span {
  color: var(--blue);
  font-family: "Unbounded", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.care-console-head strong {
  max-width: 360px;
  margin-top: 12px;
  display: block;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -.038em;
  text-wrap: balance;
}

.care-console-head b {
  padding: 8px 10px;
  border-radius: 9px;
  background: #ecf0ff;
  color: var(--blue-dark);
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
}

.care-console ul {
  margin: 34px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.care-console li {
  min-height: 82px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(130px, .72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 26px;
}

.care-console li span {
  color: #858b96;
  font-size: 12px;
  line-height: 1.4;
}

.care-console li strong {
  font-size: 14px;
  line-height: 1.48;
}

.care-console-foot {
  min-height: 58px;
  margin-top: 26px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #f0f3fa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.care-console-foot span {
  color: var(--muted);
  font-size: 12px;
}

.care-console-foot strong {
  color: var(--blue);
  font-size: 13px;
}

.admin-section {
  padding: var(--section-y) var(--page-x);
  background: var(--page);
  display: grid;
  grid-template-columns: minmax(560px, 600px) minmax(330px, 590px);
  gap: clamp(56px, 6vw, 96px);
  align-items: center;
  justify-content: center;
}

.admin-copy {
  grid-column: 2;
  grid-row: 1;
}

.admin-copy h2 {
  max-width: 590px;
  margin: 22px 0 0;
  font-size: clamp(40px, 3.5vw, 50px);
  line-height: 1.03;
}

.admin-copy > p:not(.overline) {
  max-width: 540px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 17px;
}

.inline-link {
  min-height: 44px;
  margin-top: 23px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--blue);
  font-weight: 750;
  text-decoration: none;
  text-underline-offset: 5px;
}

.inline-link:hover {
  color: var(--blue-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.screen-stage {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: clamp(370px, 32vw, 460px);
  overflow: hidden;
  border-radius: 28px;
  clip-path: inset(0 round 28px);
  isolation: isolate;
}

.screen-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20%;
  background:
    radial-gradient(circle at 23% 22%, rgba(255, 255, 255, .7), transparent 28%),
    radial-gradient(circle at 74% 68%, rgba(255, 255, 255, .42), transparent 34%);
  filter: blur(20px);
}

.screen-stage-admin {
  grid-column: 1;
  grid-row: 1;
  max-width: 600px;
  justify-self: start;
  background:
    radial-gradient(circle at 86% 18%, #74e1ff 0, transparent 31%),
    radial-gradient(circle at 18% 72%, #00b7f4 0, transparent 43%),
    linear-gradient(145deg, #9ae8f4 0%, #25c4f5 58%, #8dc7ff 100%);
}

.screen-backdrop {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 26px;
  background: rgba(250, 252, 255, .72);
  color: #202630;
  box-shadow: 0 34px 90px rgba(36, 75, 113, .16);
  backdrop-filter: blur(18px);
}

.simple-backdrop {
  width: 92%;
  height: 82%;
  top: 9%;
  right: -5%;
  opacity: .84;
}

.simple-topbar {
  min-height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(33, 77, 60, .1);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  font-size: 8px;
}

.simple-topbar > strong {
  color: var(--blue);
  font-family: "Unbounded", sans-serif;
  font-size: 10px;
}

.simple-topbar > div {
  justify-self: start;
  padding: 3px;
  border: 1px solid rgba(32, 142, 92, .16);
  border-radius: 9px;
  background: rgba(234, 248, 241, .72);
  display: flex;
}

.simple-topbar > div b,
.simple-topbar > div span {
  padding: 6px 9px;
  border-radius: 6px;
}

.simple-topbar > div b {
  background: white;
  color: #188d5b;
  box-shadow: 0 1px 4px rgba(25, 96, 67, .09);
}

.simple-topbar > div span {
  color: #77827d;
}

.simple-topbar > i {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #15945e;
  color: white;
  display: grid;
  place-items: center;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.simple-tabs {
  min-height: 42px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(33, 77, 60, .09);
  display: flex;
  align-items: center;
  gap: 8px;
  color: #66746e;
  font-size: 8px;
  font-weight: 700;
}

.simple-tabs b,
.simple-tabs span {
  padding: 7px 10px;
  border-radius: 8px;
}

.simple-tabs b {
  border: 1px solid rgba(20, 148, 94, .2);
  background: #e6f8ef;
  color: #138a57;
}

.simple-workspace {
  height: calc(100% - 88px);
  padding: 12px;
  background: rgba(237, 248, 245, .48);
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 10px;
}

.simple-create,
.simple-items {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(31, 128, 87, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .82);
}

.simple-panel-head {
  min-height: 28px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.simple-panel-head strong {
  color: #19392c;
  font-size: 10px;
}

.simple-panel-head small {
  color: #8aa097;
  font-size: 7px;
}

.simple-field {
  margin-top: 10px;
  display: block;
}

.simple-field > span {
  display: block;
  margin-bottom: 5px;
  color: #39574b;
  font-size: 7px;
  font-weight: 750;
}

.simple-field > i {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(25, 148, 94, .18);
  border-radius: 7px;
  color: #9aacA5;
  display: flex;
  align-items: center;
  font-size: 7px;
  font-style: normal;
}

.simple-textarea > i {
  min-height: 52px;
  align-items: flex-start;
  padding-top: 8px;
}

.simple-create em {
  width: max-content;
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  background: #14945e;
  color: white;
  display: block;
  font-size: 7px;
  font-style: normal;
  font-weight: 750;
}

.simple-filter {
  min-height: 28px;
  margin-top: 7px;
  padding: 0 9px;
  border: 1px solid rgba(25, 93, 68, .12);
  border-radius: 7px;
  color: #9aa8a2;
  display: flex;
  align-items: center;
  font-size: 7px;
}

.simple-item {
  min-height: 46px;
  border-bottom: 1px solid rgba(32, 77, 61, .08);
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.simple-item > i {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(30, 132, 244, .28), rgba(115, 228, 255, .5)),
    #e8f6ff;
}

.simple-item:nth-child(4) > i {
  background: linear-gradient(145deg, #ffe8c9, #ffc8b4);
}

.simple-item:nth-child(5) > i {
  background: linear-gradient(145deg, #dce0ff, #bfc9ff);
}

.simple-item p {
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.simple-item b {
  overflow: hidden;
  color: #284237;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simple-item span {
  margin-top: 3px;
  color: #8b9b95;
  font-size: 6px;
}

.screen-focus {
  position: absolute;
  z-index: 2;
  border: 2px solid rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .96);
  color: var(--ink);
  box-shadow:
    0 24px 80px rgba(31, 57, 90, .2),
    inset 0 0 0 1px rgba(17, 19, 24, .08);
  backdrop-filter: blur(22px);
}

.simple-item-focus {
  width: 59%;
  min-height: 66px;
  top: 61%;
  left: 34%;
  padding: 8px 10px 8px 8px;
  border-radius: 19px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.simple-item-focus .simple-thumb {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #1288f3;
  color: white;
  display: grid;
  place-items: center;
  font-family: "Unbounded", sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.simple-item-focus > span:nth-child(2) {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.simple-item-focus strong {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simple-item-focus small {
  margin-top: 3px;
  color: #8b9099;
  font-size: 8px;
}

.simple-item-focus > b {
  color: #15945e;
  font-size: 8px;
}

.ai-section {
  scroll-margin-top: 24px;
  padding: var(--section-y) var(--page-x);
  background: var(--blue);
  color: white;
  display: grid;
  grid-template-columns: minmax(390px, 700px) minmax(500px, 560px);
  gap: clamp(56px, 6vw, 96px);
  align-items: center;
  justify-content: center;
}

.ai-section .overline {
  color: #dcff9d;
}

.ai-copy h2 {
  max-width: 700px;
  margin: 22px 0 0;
  font-size: clamp(40px, 3.8vw, 54px);
  line-height: 1.03;
}

.ai-copy > p:not(.overline) {
  max-width: 620px;
  margin: 26px 0 0;
  color: #f1f4ff;
  font-size: 17px;
}

.screen-stage-ai {
  max-width: 560px;
  justify-self: end;
  background:
    radial-gradient(circle at 17% 21%, #ffc8a9 0, transparent 36%),
    radial-gradient(circle at 79% 22%, #8988ff 0, transparent 38%),
    radial-gradient(circle at 68% 86%, #b2c8ff 0, transparent 40%),
    linear-gradient(145deg, #f6d5db 0%, #d7c8ff 54%, #a6b7ff 100%);
}

.pro-backdrop {
  width: 90%;
  height: 72%;
  top: 28%;
  left: 17%;
  opacity: .58;
}

.pro-topbar {
  min-height: 44px;
  padding: 0 15px;
  border-bottom: 1px solid rgba(42, 45, 60, .08);
  display: flex;
  align-items: center;
  gap: 16px;
}

.pro-topbar > strong {
  color: var(--blue);
  font-family: "Unbounded", sans-serif;
  font-size: 9px;
}

.pro-topbar > div {
  padding: 3px;
  border: 1px solid rgba(55, 60, 78, .1);
  border-radius: 8px;
  background: rgba(246, 247, 250, .72);
  display: flex;
  color: #848895;
  font-size: 7px;
}

.pro-topbar > div span,
.pro-topbar > div b {
  padding: 6px 8px;
  border-radius: 6px;
}

.pro-topbar > div b {
  background: white;
  color: var(--blue);
  box-shadow: 0 1px 4px rgba(35, 42, 70, .09);
}

.pro-shell {
  height: calc(100% - 44px);
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
}

.pro-sidebar {
  padding: 17px 10px;
  border-right: 1px solid rgba(42, 45, 60, .08);
  background: rgba(248, 249, 252, .62);
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #737784;
  font-size: 7px;
}

.pro-sidebar strong,
.pro-sidebar b,
.pro-sidebar span {
  padding: 7px 8px;
  border-radius: 6px;
}

.pro-sidebar small {
  margin: 9px 8px 3px;
  color: #a1a4ae;
  font-size: 6px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pro-sidebar b {
  background: rgba(72, 80, 238, .12);
  color: var(--blue);
}

.pro-workspace {
  min-width: 0;
  padding: 18px 16px;
}

.pro-workspace-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.pro-workspace-head > div {
  display: flex;
  flex-direction: column;
}

.pro-workspace-head strong {
  font-size: 13px;
}

.pro-workspace-head small {
  margin-top: 2px;
  color: #9296a1;
  font-size: 7px;
}

.pro-workspace-head > span {
  height: max-content;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--blue);
  color: white;
  font-size: 7px;
  font-weight: 750;
}

.pro-tools {
  margin-top: 13px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #686d78;
  font-size: 7px;
}

.pro-tools i {
  min-width: 110px;
  padding: 7px 8px;
  border: 1px solid rgba(48, 52, 68, .12);
  border-radius: 6px;
  color: #a1a4ad;
  font-style: normal;
}

.pro-tools span {
  padding: 7px 4px;
  font-weight: 700;
}

.pro-row {
  min-height: 35px;
  border-top: 1px solid rgba(43, 47, 62, .08);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  color: #646975;
  font-size: 7px;
}

.pro-row b {
  overflow: hidden;
  color: #313640;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-row i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #21a154;
}

.pro-row-head {
  min-height: 28px;
  margin-top: 10px;
  background: rgba(242, 243, 247, .7);
  color: #9599a3;
  font-size: 6px;
  text-transform: uppercase;
}

.pro-row-head b {
  color: #9599a3;
  font-size: 6px;
}

.pro-row-head i {
  width: auto;
  height: auto;
  background: none;
}

.chat-focus {
  width: 78%;
  top: 10%;
  left: 7%;
  padding: 23px 24px 18px;
  border-radius: 30px;
  background: rgba(248, 249, 251, .97);
}

.chat-focus > p {
  min-height: 50px;
  margin: 0;
  color: #363a42;
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.chat-caret {
  width: 1.5px;
  height: 1.05em;
  margin-left: 3px;
  background: #23252a;
  display: inline-block;
  vertical-align: -.16em;
}

.chat-tools {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 32px;
  gap: 9px;
  align-items: center;
}

.chat-clip {
  width: 28px;
  height: 28px;
  color: #8c9199;
  display: grid;
  place-items: center;
}

.chat-clip svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-file {
  width: min(220px, 100%);
  min-width: 0;
  padding: 5px 8px 5px 5px;
  border: 1px solid #d8e9fb;
  border-radius: 18px;
  background: #e7f3ff;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}

.chat-file > span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1189f5;
  color: white;
  display: grid;
  place-items: center;
}

.chat-file svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-file > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.chat-file strong {
  overflow: hidden;
  color: #2878bd;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-file small {
  margin-top: 1px;
  color: #7697b3;
  font-size: 6px;
}

.chat-file > b {
  color: #7292ad;
  font-size: 13px;
  font-weight: 500;
}

.chat-send {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  display: grid;
  place-items: center;
}

.chat-send svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logic-banner {
  grid-column: 1 / -1;
  margin-top: clamp(36px, 5vw, 72px);
  padding: clamp(26px, 3.5vw, 48px);
  border-radius: 30px;
  background: white;
  color: var(--ink);
  display: grid;
  grid-template-columns: minmax(320px, 520px) minmax(480px, 720px);
  gap: clamp(48px, 6vw, 90px);
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logic-copy {
  max-width: 520px;
}

.logic-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.logic-brand span {
  color: #656b76;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.logic-brand a {
  width: max-content;
  color: var(--blue);
  font-family: "Unbounded", sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.logic-brand a:hover {
  color: var(--blue-dark);
}

.logic-banner h3 {
  max-width: 460px;
  margin: 30px 0 0;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.logic-banner p {
  max-width: 620px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.62;
}

.logic-action {
  min-height: 44px;
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--blue);
  font-weight: 750;
  text-decoration: none;
}

.logic-action:hover {
  color: var(--blue-dark);
}

.logic-preview {
  position: relative;
  min-height: 350px;
  background: white;
}

.logic-widget {
  position: absolute;
  z-index: 1;
  width: 78%;
  height: 100%;
  top: 0;
  left: 4%;
  padding: 15px 14px 12px;
  border: 1px solid #d9dce4;
  border-radius: 28px;
  background: #f6f7f9;
  box-shadow:
    0 24px 64px rgba(35, 39, 58, .13),
    inset 0 0 0 1px rgba(35, 38, 48, .05);
}

.widget-head {
  min-height: 28px;
  padding: 0 4px 9px;
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
  color: #7f848d;
}

.widget-head span {
  grid-column: 2;
  color: #1d2026;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}

.widget-head b {
  grid-column: 3;
  font-size: 17px;
  font-weight: 500;
  text-align: center;
}

.widget-messages {
  height: calc(100% - 105px);
  padding: 6px 2px 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.logic-banner .widget-messages p {
  max-width: 82%;
  margin: 0;
  padding: 10px 12px;
  border-radius: 15px 15px 15px 4px;
  background: white;
  color: #343841;
  box-shadow: 0 7px 18px rgba(47, 51, 71, .07);
  font-size: clamp(12.5px, 1vw, 14px);
  line-height: 1.4;
}

.logic-banner .widget-messages .widget-user {
  max-width: 70%;
  margin-left: auto;
  border-radius: 15px 15px 4px 15px;
  background: linear-gradient(145deg, #2474f5, #5a3cf2);
  color: white;
}

.widget-composer {
  position: absolute;
  right: 12px;
  bottom: 28px;
  left: 12px;
  min-height: 52px;
  padding: 5px 6px 5px 12px;
  border: 1.5px solid #8db4ff;
  border-radius: 24px;
  background: white;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
}

.widget-composer > b {
  color: #7a7f88;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
}

.widget-composer > span {
  overflow: hidden;
  color: #606570;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-composer > i {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f0f1f4;
  color: #7e838d;
  display: grid;
  place-items: center;
}

.widget-composer svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logic-widget > small {
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  color: #606570;
  font-size: 9.5px;
  text-align: center;
}

.logic-widget > small strong {
  color: var(--blue);
}

.widget-launcher {
  position: absolute;
  z-index: 2;
  width: 56px;
  height: 56px;
  right: 4%;
  bottom: 14px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2473f5, #5a37ed);
  color: white;
  box-shadow: 0 18px 38px rgba(53, 66, 204, .27);
  display: grid;
  place-items: center;
}

.widget-launcher svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

.integration-section {
  padding: var(--section-top-compact) var(--page-x) var(--section-y);
  background: white;
}

.integration-heading {
  display: grid;
  grid-template-columns: minmax(190px, .52fr) minmax(0, 1.48fr);
  gap: clamp(40px, 7vw, 112px);
}

.integration-section h2 {
  max-width: 850px;
  margin: 0;
  font-size: clamp(40px, 4.2vw, 60px);
  line-height: 1.03;
}

.integration-grid {
  margin-top: clamp(58px, 7vw, 96px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.integration-grid article {
  min-height: 300px;
  padding: 30px clamp(20px, 3vw, 42px);
}

.integration-grid article:first-child {
  padding-left: 0;
}

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

.integration-grid h3 {
  margin: 0;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -.035em;
}

.integration-grid p {
  max-width: 380px;
  margin: 80px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.62;
}

.pricing-section {
  scroll-margin-top: 24px;
  padding: var(--section-y) var(--page-x);
  background: #e7e9ed;
}

.pricing-heading {
  max-width: 760px;
}

.pricing-heading h2 {
  max-width: 720px;
  margin: 22px 0 0;
  font-size: clamp(42px, 4.6vw, 64px);
  font-weight: 720;
  line-height: 1.03;
  letter-spacing: -.062em;
  text-wrap: balance;
}

.pricing-grid {
  margin-top: clamp(54px, 7vw, 92px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.price-edition {
  min-height: 610px;
  padding: clamp(28px, 3vw, 44px);
  border-radius: var(--radius-md);
  background: white;
  display: flex;
  flex-direction: column;
}

.price-edition-accent {
  background: var(--blue);
  color: white;
}

.price-edition-enterprise {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: white;
}

.price-edition-enterprise::before {
  content: "";
  position: absolute;
  height: 4px;
  top: 0;
  right: 0;
  left: 0;
  background: linear-gradient(90deg, #ef476f, #8c5cff 52%, #24a9d4);
}

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

.edition-name {
  font-family: "Unbounded", sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.edition-note {
  color: var(--muted);
  font-size: 11px;
}

.price-edition-accent .edition-note,
.price-edition-enterprise .edition-note {
  color: #f1f3ff;
}

.price-edition h3 {
  max-width: 560px;
  margin: 42px 0 0;
  font-size: clamp(21px, 1.8vw, 27px);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.035em;
}

.price {
  margin-top: 38px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 18px;
}

.price strong {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "DejaVu Sans", sans-serif;
  font-size: clamp(38px, 3.5vw, 54px);
  line-height: 1;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}

.price del {
  color: #626873;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "DejaVu Sans", sans-serif;
  font-size: 24px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.base-price {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
}

.base-price small {
  color: #626873;
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
  text-transform: uppercase;
}

.price-edition-accent .price del {
  color: #f1f3ff;
}

.price-edition-accent .base-price small {
  color: #f1f3ff;
}

.price-on-request {
  font-family: "Manrope", Arial, sans-serif !important;
  font-size: clamp(34px, 3vw, 46px) !important;
  letter-spacing: -.045em !important;
}

.price-edition ul {
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
}

.price-edition li {
  padding: 10px 0;
  border-bottom: 1px solid #e8e9ed;
  color: #565b65;
  font-size: 13px;
}

.price-edition-accent li,
.price-edition-enterprise li {
  border-color: rgba(255, 255, 255, .2);
  color: #f1f3ff;
}

.price-action {
  min-height: 48px;
  margin-top: auto;
  border-top: 1px solid #dfe1e6;
  display: flex;
  align-items: end;
  justify-content: space-between;
  color: var(--blue);
  font-weight: 750;
  text-underline-offset: 5px;
}

.price-edition-accent .price-action,
.price-edition-enterprise .price-action {
  border-color: rgba(255, 255, 255, .28);
  color: white;
}

.price-action:hover {
  text-decoration-thickness: 2px;
}

.backup-section {
  position: relative;
  padding: var(--section-y) var(--page-x);
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 18%, rgba(67, 214, 225, .27) 0, transparent 29%),
    radial-gradient(circle at 90% 78%, rgba(211, 103, 200, .2) 0, transparent 30%),
    linear-gradient(125deg, #eef5f7 0%, #edf0fb 52%, #f6eef7 100%);
  display: grid;
  grid-template-columns: minmax(390px, 560px) minmax(500px, 680px);
  gap: clamp(56px, 6vw, 96px);
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.backup-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.62'/%3E%3C/svg%3E");
  opacity: .045;
  mix-blend-mode: soft-light;
}

.backup-copy,
.backup-record {
  position: relative;
  z-index: 1;
}

.backup-copy h2 {
  max-width: 620px;
  margin: 22px 0 0;
  font-size: clamp(42px, 4vw, 58px);
  line-height: 1.03;
}

.backup-copy > p:not(.overline) {
  max-width: 590px;
  margin: 28px 0 0;
  color: #535966;
  font-size: 17px;
  line-height: 1.62;
  text-wrap: pretty;
}

.backup-record {
  min-width: 0;
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid rgba(49, 92, 246, .13);
  border-radius: 28px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(18px);
}

.backup-record-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}

.backup-record-head span {
  color: var(--blue);
  font-family: "Unbounded", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.backup-record-head strong {
  max-width: 360px;
  margin-top: 12px;
  display: block;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -.035em;
}

.backup-record-head b {
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
}

.backup-route {
  min-height: 98px;
  margin-top: 36px;
  padding: 22px 24px;
  border-radius: 18px;
  background: #f2f4fa;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.backup-route span,
.backup-route strong {
  font-size: 15px;
  line-height: 1.35;
}

.backup-route span {
  color: var(--muted);
}

.backup-route strong {
  text-align: right;
}

.backup-route svg {
  width: 50px;
  fill: none;
  stroke: var(--blue);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.backup-details {
  margin: 28px 0 0;
}

.backup-details div {
  min-height: 54px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}

.backup-details dt {
  color: #858b96;
  font-size: 12px;
}

.backup-details dd {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
}

.turnkey-section {
  scroll-margin-top: 24px;
  padding: var(--section-y) var(--page-x);
  background: #eef0f4;
  display: grid;
  grid-template-columns: minmax(380px, 560px) minmax(520px, 720px);
  gap: clamp(56px, 6vw, 96px);
  align-items: start;
  justify-content: center;
}

.turnkey-copy {
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.turnkey-copy h2 {
  max-width: 700px;
  margin: 22px 0 0;
  font-size: clamp(40px, 4vw, 56px);
  line-height: 1.03;
}

.turnkey-copy > p:not(.overline) {
  max-width: 580px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 17px;
}

.lead-panel {
  min-width: 0;
  padding: clamp(26px, 3.2vw, 42px);
  border: 1px solid #dadde4;
  border-radius: 28px;
  background: white;
  box-shadow: 0 24px 70px rgba(39, 45, 65, .08);
}

.lead-panel-head {
  padding-bottom: 24px;
  border-bottom: 1px solid #e2e4e9;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.lead-panel-head strong {
  font-size: 21px;
  letter-spacing: -.035em;
}

.lead-panel-head span {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

body[data-capture="benefits"] .hero,
body[data-capture="scale"] .hero,
body[data-capture="scale"] .benefits-section,
body[data-capture="foundation"] .hero,
body[data-capture="foundation"] .benefits-section,
body[data-capture="foundation"] .scale-section,
body[data-capture="admin"] .hero,
body[data-capture="admin"] .benefits-section,
body[data-capture="admin"] .scale-section,
body[data-capture="admin"] .foundation-section,
body[data-capture="ai"] .hero,
body[data-capture="ai"] .benefits-section,
body[data-capture="ai"] .scale-section,
body[data-capture="ai"] .foundation-section,
body[data-capture="ai"] .admin-section,
body[data-capture="integration"] .hero,
body[data-capture="integration"] .benefits-section,
body[data-capture="integration"] .scale-section,
body[data-capture="integration"] .foundation-section,
body[data-capture="integration"] .admin-section,
body[data-capture="integration"] .ai-section,
body[data-capture="pricing"] .hero,
body[data-capture="pricing"] .benefits-section,
body[data-capture="pricing"] .scale-section,
body[data-capture="pricing"] .foundation-section,
body[data-capture="pricing"] .admin-section,
body[data-capture="pricing"] .ai-section,
body[data-capture="pricing"] .integration-section,
body[data-capture="turnkey"] main > :not(.turnkey-section),
body[data-capture="footer"] .site-header,
body[data-capture="footer"] main {
  display: none;
}

.field-row {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lead-form > label,
.field-row label {
  margin-bottom: 18px;
  display: block;
  color: #4b505a;
  font-size: 12px;
  font-weight: 750;
}

.lead-form input,
.lead-form textarea {
  width: 100%;
  margin-top: 7px;
  border: 1px solid #d9dce3;
  border-radius: 12px;
  background: #f7f8fa;
  color: var(--ink);
  font-size: 16px;
  resize: vertical;
}

.lead-form input {
  min-height: 52px;
  padding: 0 14px;
}

.lead-form textarea {
  min-height: 136px;
  padding: 13px 14px;
  line-height: 1.5;
}

.lead-form input::placeholder,
.lead-form textarea::placeholder {
  color: #8d869c;
}

.lead-form input:focus-visible,
.lead-form textarea:focus-visible {
  border-color: var(--blue);
  outline: 0;
  background: white;
  box-shadow: 0 0 0 3px rgba(49, 92, 246, .12);
}

.lead-form .button-primary {
  min-width: min(100%, 260px);
  background: var(--ink);
}

.lead-form .button-primary:hover {
  background: var(--blue);
}

.lead-form .button-primary:disabled {
  background: var(--ink);
  cursor: wait;
  opacity: .68;
  transform: none;
}

.lead-form .button-primary .action-icon {
  color: var(--lime);
}

.lead-consent {
  width: max-content;
  max-width: 100%;
  margin: 2px 0 22px !important;
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  font-weight: 550 !important;
  cursor: pointer;
}

.lead-consent input {
  flex: 0 0 auto;
  width: 18px;
  min-height: 18px;
  height: 18px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--blue);
}

.lead-consent span {
  color: var(--muted);
  line-height: 1.45;
}

.lead-consent a {
  color: var(--ink);
  text-underline-offset: 3px;
}

.lead-consent a:hover {
  color: var(--blue);
}

.lead-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.lead-submit {
  display: flex;
  align-items: center;
  gap: 18px;
}

.form-note {
  max-width: 220px;
  margin: 0;
  color: #716a85;
  font-size: 11px;
}

.privacy-note {
  margin: 12px 0 0;
  color: #716a85;
  font-size: 11px;
  line-height: 1.5;
}

.privacy-note a {
  color: var(--ink);
  text-underline-offset: 3px;
}

.privacy-note a:hover {
  color: var(--blue);
}

.form-feedback {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid #ccebd9;
  border-radius: 14px;
  background: #f0faf5;
  color: #145b39;
  font-size: 14px;
  line-height: 1.45;
}

.form-feedback:focus-visible {
  outline: 3px solid rgba(49, 92, 246, .18);
  outline-offset: 2px;
}

.form-feedback strong,
.form-feedback span {
  display: block;
}

.form-feedback strong {
  margin-bottom: 2px;
  color: #103d29;
  font-size: 15px;
  letter-spacing: -.015em;
}

.form-feedback[data-kind="error"] {
  border-color: #f2ccd4;
  background: #fff0f2;
  color: #9f2840;
}

.form-feedback[data-kind="error"] strong {
  color: #7e1f33;
}

.form-feedback a {
  display: inline-block;
  margin-top: 6px;
  color: inherit;
  font-weight: 750;
  text-underline-offset: 3px;
}

.site-footer {
  --footer-columns: minmax(360px, 1.4fr) minmax(150px, .5fr) minmax(170px, .55fr);
  --footer-gap: clamp(44px, 6vw, 104px);
  position: relative;
  padding: clamp(72px, 8vw, 116px) var(--page-x) 30px;
  overflow: hidden;
  border-top: 1px solid var(--line-dark);
  background: #0d0f14;
  color: white;
  isolation: isolate;
}

.site-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(700px, 70vw);
  height: 360px;
  top: -230px;
  left: -120px;
  border-radius: 50%;
  background: linear-gradient(110deg, rgba(40, 211, 216, .48), rgba(79, 91, 255, .42) 52%, rgba(206, 83, 194, .34));
  filter: blur(74px);
  opacity: .48;
}

.footer-main {
  display: grid;
  grid-template-columns: var(--footer-columns);
  gap: var(--footer-gap);
  align-items: start;
}

.footer-brand {
  max-width: 560px;
}

.footer-logo {
  width: max-content;
  background: linear-gradient(100deg, #76f0df 0%, #59a5ff 42%, #9c78ff 72%, #ff9bba 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: white;
  display: block;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(36px, 4.3vw, 62px);
  font-weight: 600;
  letter-spacing: -.06em;
  line-height: 1;
  text-decoration: none;
  -webkit-text-fill-color: transparent;
}

.footer-brand p {
  max-width: 510px;
  margin: 28px 0 0;
  color: #adb2be;
  font-size: 15px;
  line-height: 1.65;
}

.footer-contact {
  min-height: 44px;
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  color: white;
  font-size: 14px;
  font-weight: 700;
  text-underline-offset: 5px;
}

.footer-contact:hover {
  color: #83d9ff;
}

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

.footer-column strong {
  margin-bottom: 8px;
  color: #777d8a;
  font-family: "Unbounded", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.footer-column a {
  width: max-content;
  max-width: 100%;
  color: #c6cad2;
  font-size: 13px;
  text-decoration: none;
}

.footer-column a:hover {
  color: white;
}

.footer-bottom {
  margin-top: clamp(56px, 5vw, 76px);
  padding-top: 28px;
  border-top: 1px solid var(--line-dark);
  display: grid;
  grid-template-columns: var(--footer-columns);
  gap: var(--footer-gap);
  align-items: start;
  color: #777d88;
  font-size: 12px;
}

.footer-meta {
  max-width: 430px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.65;
}

.footer-documents {
  grid-column: 2 / -1;
}

.footer-document-links {
  display: grid;
  grid-template-columns: minmax(150px, .5fr) minmax(170px, .55fr);
  gap: 12px var(--footer-gap);
}

.footer-bottom a {
  color: #9da2ad;
  line-height: 1.45;
  text-decoration: none;
}

.footer-bottom a:hover {
  color: white;
}

.site-footer p {
  margin: 0;
}

.site-header,
.hero,
.benefits-section,
.scale-section,
.foundation-section,
.care-section,
.admin-section,
.ai-section,
.integration-section,
.pricing-section,
.backup-section,
.turnkey-section,
.site-footer {
  padding-left: max(var(--page-x), env(safe-area-inset-left));
  padding-right: max(var(--page-x), env(safe-area-inset-right));
}

.motion-ready .reveal-item {
  opacity: 0;
  transform: translateY(22px) scale(.988);
  transition:
    opacity 620ms ease var(--reveal-delay, 0ms),
    transform 760ms cubic-bezier(.2, .78, .22, 1) var(--reveal-delay, 0ms);
}

.motion-ready .reveal-item.is-visible {
  opacity: 1;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .benefit,
  .price-edition,
  .screen-focus,
  .logic-widget {
    transition: transform 520ms cubic-bezier(.2, .78, .22, 1);
  }

  .benefit:hover,
  .price-edition:hover {
    transform: translateY(-5px);
  }

  .screen-stage:hover .screen-focus,
  .logic-banner:hover .logic-widget {
    transform: translateY(-6px);
  }
}

@media (max-width: 1100px) {
  .care-layout {
    grid-template-columns: 1fr;
  }

  .care-copy {
    max-width: 760px;
  }

  .care-console {
    width: 100%;
    max-width: 720px;
  }

  .admin-section,
  .ai-section,
  .backup-section,
  .turnkey-section {
    grid-template-columns: 1fr;
  }

  .admin-copy,
  .ai-copy,
  .backup-copy,
  .turnkey-copy {
    max-width: 760px;
  }

  .admin-copy,
  .screen-stage-admin {
    grid-column: 1;
    grid-row: auto;
  }

  .screen-stage-admin {
    max-width: 600px;
  }

  .screen-stage-ai {
    max-width: 560px;
  }

  .backup-record {
    width: 100%;
    max-width: 720px;
  }

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

  .price-edition-enterprise {
    grid-column: 1 / -1;
    min-height: 500px;
  }
}

@media (max-width: 900px) {
  .main-nav {
    display: none;
  }

  .site-header {
    grid-template-columns: 1fr auto;
  }

  .section-heading,
  .scale-intro,
  .foundation-heading,
  .integration-heading {
    grid-template-columns: 1fr;
  }

  .section-heading h2,
  .scale-intro h2,
  .foundation-heading h2,
  .integration-heading h2 {
    margin-top: 20px;
  }

  .foundation-heading h2 {
    margin-top: 0;
  }

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

  .benefit:nth-child(3) {
    grid-column: span 2;
    min-height: 270px;
    flex-direction: column;
  }

  .benefit:nth-child(3) > div {
    max-width: 520px;
    align-self: auto;
  }

  .scale-path {
    border-top: 0;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .scale-path article,
  .scale-path article:first-child {
    min-height: 250px;
    padding: 26px 24px 24px;
    border: 1px solid rgba(17, 19, 24, .055);
    border-radius: 18px;
    background: #f6f7f9;
  }

  .scale-path article + article {
    border: 1px solid rgba(17, 19, 24, .055);
  }

  .scale-tag {
    border-radius: 9px;
  }

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

  .foundation-grid article:nth-child(3) {
    border-left: 0;
  }

  .foundation-grid article:nth-child(n + 3) {
    border-top: 1px solid var(--line-dark);
  }

  .integration-grid article {
    padding-inline: 22px;
  }

  .scale-copy .overline {
    margin-bottom: 0;
  }

  .scale-copy {
    grid-column: 1;
  }

  .foundation-heading h2 {
    grid-column: 1;
  }

  .logic-banner {
    grid-template-columns: 1fr;
  }

  .logic-copy {
    max-width: 620px;
  }

  .logic-preview {
    min-height: 380px;
  }

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

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-documents {
    grid-column: 1;
  }

  .footer-document-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 48px;
  }
}

@media (max-width: 700px) {
  :root {
    --page-x: 18px;
    --section-y: 80px;
  }

  .site-header {
    min-height: 68px;
  }

  .brand {
    font-size: 16px;
  }

  .header-action {
    min-height: 44px;
    padding: 0 14px;
    gap: 11px;
    font-size: 12px;
  }

  .hero {
    min-height: 0;
    padding-top: 66px;
    background: var(--page);
  }

  .hero h1 {
    margin-top: 20px;
    font-size: clamp(45px, 13vw, 58px);
    line-height: .98;
  }

  .hero-lead {
    margin-top: 26px;
    font-size: 17px;
  }

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

  .hero-actions .button {
    width: 100%;
  }

  .usage-modes {
    margin-top: 58px;
    border-bottom: 0;
    grid-template-columns: 1fr;
  }

  .usage-modes > li,
  .usage-modes > li:first-child {
    min-height: 72px;
    padding: 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .section-heading h2,
  .scale-intro h2,
  .foundation-heading h2,
  .care-copy h2,
  .admin-copy h2,
  .ai-copy h2,
  .integration-heading h2,
  .pricing-heading h2,
  .backup-copy h2,
  .turnkey-copy h2 {
    font-size: 38px;
    letter-spacing: -.055em;
  }

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

  .benefit,
  .benefit:nth-child(3) {
    grid-column: auto;
    min-height: 250px;
    flex-direction: column;
  }

  .benefit:nth-child(3) > div {
    align-self: auto;
  }

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

  .foundation-grid article,
  .foundation-grid article:first-child,
  .foundation-grid article + article {
    min-height: 230px;
    padding: 24px 0;
    border-top: 1px solid var(--line-dark);
    border-left: 0;
  }

  .foundation-grid article:first-child {
    border-top: 0;
  }

  .experience-note {
    margin-top: 48px;
    font-size: 21px;
  }

  .care-layout {
    gap: 52px;
  }

  .care-console {
    padding: 20px;
    border-radius: 22px;
  }

  .care-console-head {
    flex-direction: column;
    gap: 14px;
  }

  .care-console li {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .care-console-foot {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .ai-section {
    gap: 52px;
  }

  .screen-stage {
    min-height: 340px;
    border-radius: 22px;
    clip-path: inset(0 round 22px);
  }

  .simple-backdrop {
    width: 108%;
    height: 80%;
    top: 11%;
    right: -28%;
  }

  .simple-topbar,
  .simple-tabs {
    padding-inline: 10px;
  }

  .simple-tabs {
    gap: 2px;
  }

  .simple-workspace {
    padding: 8px;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    gap: 7px;
  }

  .simple-create,
  .simple-items {
    padding: 9px;
  }

  .simple-item-focus {
    width: 75%;
    min-height: 56px;
    top: 64%;
    left: 20%;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .simple-item-focus .simple-thumb {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 10px;
  }

  .simple-item-focus strong {
    font-size: 10px;
  }

  .simple-item-focus small,
  .simple-item-focus > b {
    font-size: 7px;
  }

  .pro-backdrop {
    width: 112%;
    height: 68%;
    top: 32%;
    left: 16%;
  }

  .pro-shell {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .pro-sidebar {
    padding-inline: 7px;
  }

  .pro-workspace {
    padding: 14px 12px;
  }

  .chat-focus {
    width: 88%;
    top: 8%;
    left: 6%;
    padding: 18px 16px 14px;
    border-radius: 26px;
  }

  .chat-focus > p {
    min-height: 44px;
    margin: 0;
    font-size: 15px;
  }

  .chat-tools {
    margin-top: 18px;
    grid-template-columns: 26px minmax(0, 1fr) 30px;
    gap: 6px;
  }

  .chat-clip {
    width: 26px;
    height: 26px;
  }

  .chat-send {
    width: 30px;
    height: 30px;
  }

  .logic-banner {
    margin-top: 48px;
    padding: 20px;
    border-radius: 24px;
    gap: 34px;
  }

  .logic-banner h3 {
    font-size: 31px;
  }

  .logic-preview {
    min-height: 360px;
  }

  .logic-widget {
    width: 100%;
    left: 0;
  }

  .widget-launcher {
    display: none;
  }

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

  .integration-grid article,
  .integration-grid article:first-child,
  .integration-grid article + article {
    min-height: 230px;
    padding: 24px 0;
    border-left: 0;
  }

  .integration-grid article + article {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .integration-grid p {
    margin-top: 48px;
  }

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

  .price-edition,
  .price-edition-enterprise {
    grid-column: auto;
    min-height: 540px;
  }

  .backup-section {
    gap: 52px;
  }

  .backup-record {
    padding: 20px;
    border-radius: 22px;
  }

  .backup-record-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .backup-route {
    padding: 18px;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    gap: 9px;
  }

  .backup-route svg {
    width: 34px;
  }

  .backup-route span,
  .backup-route strong {
    font-size: 13px;
  }

  .backup-details div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .lead-panel {
    padding: 20px;
    border-radius: 22px;
  }

  .lead-panel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .lead-panel-head span {
    text-align: left;
  }

  .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .lead-submit {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .lead-submit .button {
    width: 100%;
  }

  .form-note {
    max-width: none;
  }

  .turnkey-section {
    gap: 58px;
  }

  .site-footer {
    padding-top: 64px;
  }

  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px 24px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-brand p {
    margin-top: 22px;
  }

  .footer-contact {
    margin-top: 18px;
  }

  .footer-bottom {
    margin-top: 52px;
    padding-top: 24px;
    gap: 30px;
  }

  .footer-documents {
    grid-column: 1;
  }

  .footer-document-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
  }
}

@media (max-width: 340px) {
  .logic-preview {
    min-height: 420px;
  }

  .footer-document-links {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .action-icon,
  .header-action,
  .button,
  .benefit,
  .price-edition,
  .screen-focus,
  .logic-widget,
  .reveal-item {
    transition: none;
  }

  .motion-ready .reveal-item {
    opacity: 1;
    transform: none;
  }
}

@media (forced-colors: active) {
  .gradient-word {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }

  .footer-logo {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}