:root {--paper: #FFFBF4;
  --paper-2: #F7F5F2;
  --paper-3: #EFEBE5;
  --card: #FFFFFF;
  --line: #E4E0DA;
  --line-soft: #EFECE5;

  
  --ink: #1B1B1B;
  --ink-2: #494846;
  --ink-3: #6D6B69;
  --ink-inv: #FAF4EE;
  --inv-2: rgb(250 244 238 / 0.78);
  --inv-3: rgb(250 244 238 / 0.64);

  
  --purple: #5938B7;
  --purple-hover: #4A2C9E;
  --purple-light: #A98DF6;
  --purple-deep: #201547;
  --apricot: var(--purple-light);
  --apricot-soft: #E0D4F7;
  --apricot-deep: var(--purple);
  --sage: #8CC98C;
  --sage-soft: #D4F0D4;
  --sage-deep: #2F6B3F;
  --navy: var(--purple-deep);
  --navy-soft: #D8EBFF;
  --peach: #FDE8D8;
  --blue-soft: #D8EBFF;
  --pink-soft: #F5D5E0;
  --yellow-soft: #FFF3D4;
  --night: #1B1B1B;
  --night-2: #262626;

  
  --font-display: "Signika", "Geist", sans-serif;
  --font-ui: "Geist", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --fs-display: clamp(2.6rem, 1.55rem + 4.2vw, 5.4rem);
  --fs-h1: clamp(2.35rem, 1.5rem + 3.3vw, 4.4rem);
  --fs-h2: clamp(1.95rem, 1.35rem + 2.25vw, 3.3rem);
  --fs-h3: clamp(1.3rem, 1.15rem + 0.55vw, 1.6rem);
  --fs-lead: clamp(1.1rem, 1.03rem + 0.35vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-2xs: 0.8rem;

  
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section: clamp(72px, 5vw + 48px, 144px);
  --gutter: clamp(20px, 4vw, 40px);
  --maxw: 1240px;
  --maxw-text: 42rem;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

  --shadow-1: 0 1px 2px rgb(27 27 27 / 0.06), 0 2px 8px rgb(27 27 27 / 0.04);
  --shadow-2: 0 2px 6px rgb(27 27 27 / 0.06), 0 18px 40px -12px rgb(27 27 27 / 0.16);
  --shadow-3: 0 30px 80px -20px rgb(27 27 27 / 0.35), 0 8px 24px -8px rgb(27 27 27 / 0.18);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms; --t-med: 320ms; --t-slow: 720ms;

  color-scheme: light;}
.container {width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter);}
.container--narrow {max-width: calc(880px + var(--gutter) * 2);}
.cta-group {display: flex; flex-wrap: wrap; gap: 12px; align-items: center;}
.nav {position: sticky; top: 0; z-index: 50;
  background: rgb(255 251 244 / 0.82);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med), background-color var(--t-med);}
.nav.is-scrolled {border-bottom-color: var(--line);}
.nav__inner {display: flex; align-items: center; gap: var(--s-5); height: 68px;}
.brand {display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0;}
.brand__mark {width: 30px; height: 30px;}
.brand__text {display: grid; line-height: 1.05;}
.brand__name {font-weight: 600; font-size: 0.98rem; letter-spacing: -0.015em;}
.brand__by {font-size: 0.7rem; color: var(--ink-3); letter-spacing: 0.01em;}
.nav__links {display: flex; align-items: center; gap: 2px; margin-left: auto; list-style: none;}
.nav__links a {display: inline-flex; padding: 8px 12px; border-radius: var(--r-pill); text-decoration: none;
  font-size: var(--fs-sm); color: var(--ink-2); transition: background-color var(--t-fast), color var(--t-fast);}
.nav__links a:hover {background: rgb(27 27 27 / 0.05); color: var(--ink);}
.nav__links a[aria-current="page"] {color: var(--ink); background: rgb(27 27 27 / 0.06);}
.nav__actions {display: flex; align-items: center; gap: 8px;}
.nav__login {font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none; padding: 8px 12px; border-radius: var(--r-pill);}
.nav__login:hover {color: var(--ink); background: rgb(27 27 27 / 0.05);}
.nav__toggle {display: none; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; margin-left: auto;}
.nav__toggle span {display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative; transition: transform var(--t-med) var(--ease-out), background-color var(--t-fast);}
.nav__toggle span::before, .nav__toggle span::after {content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink); transition: transform var(--t-med) var(--ease-out);}
.nav__toggle span::before {top: -6px;}
.nav__toggle span::after {top: 6px;}
.nav.is-open .nav__toggle span {background: transparent;}
.nav.is-open .nav__toggle span::before {transform: translateY(6px) rotate(45deg);}
.nav.is-open .nav__toggle span::after {transform: translateY(-6px) rotate(-45deg);}
.mobile-menu {display: none;}
@media (max-width: 1060px) {
  .nav__links, .nav__actions {display: none;}
  .nav__toggle {display: inline-flex;}
  .mobile-menu {display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-med) var(--ease-out);
    border-top: 1px solid transparent;}
  .nav.is-open .mobile-menu {grid-template-rows: 1fr; border-top-color: var(--line);}
  .mobile-menu__inner {overflow: hidden;}
  .mobile-menu ul {list-style: none; padding: 12px var(--gutter) 8px; display: grid;}
  .mobile-menu li a {display: block; padding: 14px 0; font-size: 1.15rem; text-decoration: none; border-bottom: 1px solid var(--line-soft);}
  .mobile-menu .cta-group {padding: 16px var(--gutter) 24px;}
  .mobile-menu .btn {flex: 1;}
}
.footer__brand .brand, .footer__brand .brand:hover {color: var(--ink-inv); text-decoration: none;}
.footer__brand .brand__name {white-space: nowrap;}
.footer__brand .brand__by {color: var(--inv-3);}
.nav__inner > nav {margin-left: auto;}
.nav__links {margin-left: 0;}
:root {--fs-h1: clamp(2.3rem, 1.5rem + 3vw, 4.1rem);}
@media (max-width: 520px) {
  .cta-group > .btn {flex: 1 1 100%;}
}
.cta-band--light .cta-group {justify-content: center;}
@media (min-width: 1061px) {
  .nav {transition: background-color var(--t-med), border-color var(--t-med), padding var(--t-med) var(--ease-out);}
  .nav.is-scrolled {background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: 10px;}
  .nav.is-scrolled .nav__inner {max-width: calc(1120px + var(--gutter) * 2); height: 58px; background: rgb(255 255 255 / 0.9); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: var(--shadow-1); padding-inline: 12px 8px;}
  .nav__inner {transition: max-width var(--t-med) var(--ease-out), height var(--t-med) var(--ease-out), border-radius var(--t-med);}
}
.container.faq-layout {max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto;}
.cta-band--offer .cta-group {gap: 14px 28px;}
@media (max-width: 520px) {
  .cta-band--offer .cta-group {flex-direction: column;}
}
@media (max-width: 520px) {
  .cta-band--offer .cta-group {flex-wrap: nowrap; align-items: center;}
  .cta-band--offer .cta-group > .btn {flex: none; width: 100%;}
}
.brand__mark {width: 30px; height: 30px; border-radius: 50%;}
:root {--fs-h1: clamp(2.1rem, 1.4rem + 2.4vw, 3.5rem);
  --fs-h2: clamp(1.8rem, 1.3rem + 1.7vw, 2.8rem);}
.container.split--stack {max-width: calc(var(--maxw) + var(--gutter) * 2);}
:root {--p-lilac: #D9C8FF; --p-blue: #C7E1FF; --p-peach: #FFD9C2; --p-green: #C9EDC9; --p-pink: #F9C9E6; --p-yellow: #FFE7A1;}
:root {--sh-1: 0 1px 2px rgb(27 27 27 / 0.04), 0 4px 14px rgb(27 27 27 / 0.05);
  --sh-2: 0 2px 4px rgb(27 27 27 / 0.04), 0 14px 36px -10px rgb(27 27 27 / 0.14);
  --sh-3: 0 4px 10px rgb(27 27 27 / 0.05), 0 30px 64px -18px rgb(27 27 27 / 0.24);
  --r-lg: 20px; --r-xl: 26px;
  --shadow-1: var(--sh-1); --shadow-2: var(--sh-2);}
.ai-open {position: relative;}
.ai-open__trigger {display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 8px; border: 0; border-radius: var(--r-pill); background: rgb(27 27 27 / 0.05); color: var(--ink-2); font: 500 var(--fs-sm)/1 var(--font-ui); white-space: nowrap; cursor: pointer; transition: background-color 0.2s, color 0.2s;}
.ai-open__trigger:hover, .ai-open[data-open="true"] .ai-open__trigger {background: rgb(27 27 27 / 0.09); color: var(--ink);}
.ai-open__logos {display: flex;}
.ai-open__logos img {width: 20px; height: 20px; padding: 2px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1.5px rgb(255 251 244);}
.ai-open__logos img + img {margin-left: -5px;}
.ai-open__caret {width: 12px; height: 12px; transition: transform 0.25s var(--ease-out);}
.ai-open[data-open="true"] .ai-open__caret {transform: rotate(180deg);}
.ai-open__menu {position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; display: grid; gap: 2px; min-width: 260px; padding: 8px; border-radius: 18px; background: var(--card); box-shadow: var(--sh-3); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top right; transition: opacity 0.2s, transform 0.25s var(--ease-out), visibility 0s linear 0.25s;}
.ai-open__menu::before {content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;}
.ai-open[data-open="true"] .ai-open__menu {opacity: 1; visibility: visible; transform: none; transition-delay: 0s;}
@media (hover: hover) {
  .ai-open:hover .ai-open__menu {opacity: 1; visibility: visible; transform: none; transition-delay: 0s;}
}
.ai-open__head {padding: 8px 10px 6px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);}
.ai-open-item {display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: none; font: 500 0.92rem/1.2 var(--font-ui); color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; transition: background-color 0.15s;}
.ai-open-item:hover, .ai-open-item:focus-visible {background: #F6F2EC;}
.ai-open-item img {flex: none;}
.ai-open__sep {height: 1px; margin: 4px 8px; background: var(--line-soft);}
@media (max-width: 1320px) {
  .ai-open__label {display: none;}
}
.mobile-ai {padding: 12px var(--gutter) 0;}
.mobile-ai__k {font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);}
.mobile-ai__row {display: flex; gap: 8px; margin-top: 10px;}
.mobile-ai .ai-open-item {flex: 1; justify-content: center; padding: 12px; background: rgb(27 27 27 / 0.05);}
.ai-paste {position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 20px;}
.ai-paste[data-open="true"] {display: grid;}
.ai-paste__backdrop {position: absolute; inset: 0; background: rgb(27 27 27 / 0.45);}
.ai-paste__card {position: relative; display: grid; gap: 12px; justify-items: start; width: min(440px, 100%); padding: 32px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-3); animation: ai-pop 0.35s var(--ease-out);}
.ai-paste__card h3 {margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.15;}
.ai-paste__card p {margin: 0; color: var(--ink-2);}
.ai-paste__badge {padding: 4px 10px; border-radius: var(--r-pill); background: var(--p-green); color: #1D4D28; font-size: 0.78rem; font-weight: 600;}
.ai-paste__close {position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgb(27 27 27 / 0.05); font-size: 1.2rem; line-height: 1; cursor: pointer;}
.ai-paste kbd {padding: 1px 6px; border-radius: 6px; background: #F3EFE8; font-family: var(--font-mono); font-size: 0.8em;}
.ai-open__label {display: inline !important;}
.container.faq-layout {display: block;}
@media (max-width: 1060px) {
  .nav.is-scrolled {background: rgb(255 255 255 / 0.9);}
}
:root {--frame-gap: 12px; --frame-r: 28px; --frame-cream: #F9F6F3; --frame-purple: #6712F5;}
@media (max-width: 640px) {
  :root {--frame-gap: 8px; --frame-r: 22px;}
}
:where([data-page]) .nav {background: rgb(255 255 255 / 0.86);}
:where([data-page]) .nav.is-open {background: #FFFFFF;}
@media (max-width: 1060px) {
  :where([data-page]) .nav.is-scrolled {background: rgb(255 255 255 / 0.92);}
}
:where([data-page]) .ai-open__logos img {box-shadow: 0 0 0 1.5px #FFFFFF;}
:where([data-page]) main > .section:has(> .container > .cases) {margin: var(--frame-gap); border-radius: var(--frame-r); background: var(--frame-cream);}
.mobile-menu li a[aria-current="page"] {color: var(--purple); font-weight: 600;}
.mobile-menu li a[aria-current="page"]::after {content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 10px; border-radius: 50%; background: currentColor; vertical-align: middle;}
@media (max-width: 1060px) {
  .nav {transition: transform 0.3s var(--ease-out), border-color var(--t-med), background-color var(--t-med);}
  .nav.is-hidden {transform: translateY(-100%);}
}
.page-hero--center .cta-group {justify-content: center;}
@media (max-width: 560px) {
  .page-hero--center .cta-group .btn {width: 100%; justify-content: center;}
}
.pb-thanks .cta-group, .wb-thanks .cta-group {justify-content: center; gap: 12px 24px;}
.pb-access .cta-group {justify-content: center; margin-top: 8px;}
.wb-hero .cta-group {justify-content: center;}
.nav__dd {position: relative; display: flex; align-items: center; border-radius: var(--r-pill); transition: background-color var(--t-fast);}
.nav__links .nav__dd > a {padding-right: 2px; background: none;}
.nav__dd:hover, .nav__dd[data-open="true"] {background: rgb(27 27 27 / 0.05);}
.nav__dd:has(> a[aria-current="page"]) {background: rgb(27 27 27 / 0.06);}
.nav__dd-btn {display: inline-grid; place-items: center; width: 24px; height: 32px; margin-right: 4px; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-3); cursor: pointer;}
.nav__dd-btn:hover {color: var(--ink);}
.nav__dd-btn svg {width: 12px; height: 12px; transition: transform 0.25s var(--ease-out);}
.nav__dd[data-open="true"] .nav__dd-btn svg {transform: rotate(180deg);}
.nav__dd-menu {position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; display: grid; gap: 2px; min-width: 300px; padding: 8px; border-radius: 18px; background: var(--card); box-shadow: var(--sh-3); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top left; transition: opacity 0.2s, transform 0.25s var(--ease-out), visibility 0s linear 0.25s;}
.nav__dd-menu::before {content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;}
.nav__dd[data-open="true"] .nav__dd-menu, .nav__dd:focus-within .nav__dd-menu {opacity: 1; visibility: visible; transform: none; transition-delay: 0s;}
@media (hover: hover) {
  .nav__dd:hover .nav__dd-menu {opacity: 1; visibility: visible; transform: none; transition-delay: 0s;}
}
.nav__links .nav__dd-menu a {display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: none; color: var(--ink); font-size: 0.92rem; font-weight: 500; line-height: 1.25;}
.nav__links .nav__dd-menu a small {font-size: 0.78rem; font-weight: 400; color: var(--ink-3);}
.nav__links .nav__dd-menu a:hover, .nav__links .nav__dd-menu a:focus-visible {background: #F6F2EC;}
.nav__links .nav__dd-menu a[aria-current="page"] {background: rgb(27 27 27 / 0.06);}
.mobile-menu li.mobile-sub a {padding: 11px 0 11px 18px; font-size: 1rem; color: var(--ink-2);}