@font-face {
  font-family:'Vela Sans';
  src:url("assets/fonts/VelaSans-Regular.woff2") format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap
}

@font-face {
  font-family:'Vela Sans';
  src:url("assets/fonts/VelaSans-Medium.woff2") format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap
}

@font-face {
  font-family:'Vela Sans';
  src:url("assets/fonts/VelaSans-Bold.woff2") format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap
}

@font-face {
  font-family:'Vela Sans';
  src:url("assets/fonts/VelaSans-ExtraBold.woff2") format('woff2');
  font-weight:800;
  font-style:normal;
  font-display:swap
}

:root {
  --paper:#fffffb;
  --ink:#19191b;
  --orange:#ff7700;
  --orange-hover:#e96700;
  --lavender:#eee7ff;
  --peach:#ffdfc5;
  --butter:#fff0be;
  --line:#dcd8d0;
  --muted:#59554e;
  --radius:40px;
  --section-space:80px;
  --body:20px;
  --body-line:30px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
  scrollbar-color:#c1adfb var(--paper)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 var(--body)/var(--body-line) 'Vela Sans',sans-serif;
  -webkit-font-smoothing:antialiased
}

body:has(dialog[open]) {
  overflow:hidden
}

button,input {
  font:inherit
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

a {
  color:inherit;
  text-decoration:none
}

button {
  color:inherit
}

p,h1,h2,h3 {
  margin:0
}

h1,h2,h3 {
  font-weight:800;
  letter-spacing:-.025em
}

h1 {
  font-size:72px;
  line-height:78px;
  color:#000
}

h2 {
  font-size:48px;
  line-height:54px;
  text-wrap:balance
}

h3,.lead {
  font-size:26px;
  line-height:30px;
  font-weight:700
}

img {
  display:block;
  max-width:100%;
  height:auto
}

svg {
  display:block
}

.svg-definitions {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

svg use {
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round
}

button:disabled {
  cursor:default
}

:focus-visible {
  outline:3px solid #7251b3;
  outline-offset:6px
}

::selection {
  color:#211438;
  background:#e3d6ff
}

input {
  caret-color:var(--orange);
  accent-color:var(--orange)
}

.shell {
  width:calc(100% - 112px * 2);
  max-width:1216px;
  margin-inline:auto
}

.section {
  padding-block:var(--section-space)
}

.split {
  display:grid;
  grid-template-columns:470px minmax(0,1fr);
  column-gap:88px
}

.skip-link {
  position:fixed;
  left:16px;
  top:12px;
  z-index:99;
  transform:translateY(-160%);
  background:var(--ink);
  color:white;
  padding:10px 20px;
  border-radius:12px
}

.skip-link:focus {
  transform:none
}

.header {
  height:105px;
  display:flex;
  align-items:center;
  gap:48px
}

.brand {
  display:block;
  flex-shrink:0
}

.header-phone {
  margin-left:auto;
  font-size:32px;
  line-height:37px;
  font-weight:700;
  letter-spacing:-.02em;
  white-space:nowrap
}

.login {
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 0 10px 10px;
  background:none;
  border:0;
  font-size:18px;
  font-weight:700
}

.login:hover,.footer nav button:hover {
  color:#a94b00
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:56px;
  padding:14px 30px;
  border:1px solid transparent;
  border-radius:28px;
  background:var(--orange);
  color:#fff;
  font-size:22px;
  font-weight:800;
  line-height:26px;
  white-space:nowrap
}

.button svg {
  width:24px;
  height:24px;
  flex-shrink:0
}

.button:hover {
  background:var(--orange-hover)
}

.button-outline {
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--ink)
}

.hero {
  overflow:hidden
}

.hero-inner {
  height:592px;
  position:relative;
  padding-top:64px
}

.hero-copy {
  position:relative;
  z-index:2;
  width:800px;
  pointer-events:none
}

.hero-copy .button {
  pointer-events:auto;
  margin-top:28px
}

.hero h1 {
  white-space:nowrap
}

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

.hero-description {
  max-width:575px;
  font-size:26px;
  line-height:36px;
  margin-top:26px
}

.hero-intro {
  font-weight:700
}

.hero-art {
  position:absolute;
  width:800px;
  height:590px;
  right:-112px;
  bottom:0;
  pointer-events:none
}

.hero-shape {
  position:absolute;
  right:0;
  top:2px;
  width:590px;
  height:570px;
  object-fit:fill
}

.hero-makar {
  position:absolute;
  width:800px;
  max-width:none;
  right:0;
  bottom:6px
}

.hero-rays {
  position:absolute;
  left:575px;
  top:28px;
  transform:rotate(-8deg)
}

.soft-panel {
  position:relative;
  overflow:hidden;
  border-radius:var(--radius)
}

.about {
  background:linear-gradient(155deg,#ede5ff,#f7f2ff)
}

.about:before {
  content:'';
  position:absolute;
  inset:0 auto 0 -140px;
  width:765px;
  background:url("assets/illustrations/shape-lavender.svg") center/100% 170% no-repeat;
  opacity:.19;
  pointer-events:none
}

.about-inner {
  position:relative;
  padding-block:80px
}

.about-copy>p+p {
  margin-top:24px
}

.underline {
  width:360px;
  max-width:86%;
  height:15px;
  margin-top:42px
}

.when h2 {
  margin-bottom:56px
}

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

.situation {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:var(--radius);
  padding:32px;
  min-height:232px
}

.situation:after {
  content:'';
  position:absolute;
  z-index:-1;
  width:480px;
  height:320px;
  top:150px;
  left:130px;
  background:var(--blob) center/contain no-repeat;
  opacity:.24
}

.situation-purple {
  background:linear-gradient(145deg,#faf6ff,#f0e9ff);
  --blob:url("assets/illustrations/shape-lavender.svg")
}

.situation-peach {
  background:linear-gradient(145deg,#ffecdd,#ffdab9);
  --blob:url("assets/illustrations/shape-peach.svg")
}

.situation-yellow {
  background:linear-gradient(145deg,#fff9e8,#fcebc1);
  --blob:url("assets/illustrations/shape-yellow.svg")
}

.situation-heading {
  display:flex;
  align-items:center;
  gap:20px;
  min-height:60px;
  margin-bottom:24px
}

.situation-heading img {
  flex-shrink:0;
  object-fit:contain
}

.situation-heading h3 {
  font-size:26px;
  line-height:30px;
  font-weight:700;
  letter-spacing:-.015em
}

.situation p {
  max-width:330px
}

.character {
  padding-top:24px;
  padding-bottom:88px;
  display:grid;
  grid-template-columns:470px minmax(0,1fr);
  column-gap:88px;
  align-items:center
}

.character-art {
  align-self:end;
  width:470px;
  padding-top:10px
}

.character-art img {
  width:470px
}

.character-copy h2 {
  margin-bottom:28px
}

.character-copy p+p {
  margin-top:20px
}

.conversation-toggle {
  margin-top:30px
}

.conversation-toggle[aria-expanded=true] svg {
  transform:rotate(45deg)
}

.conversation-toggle svg {
  transition:transform .2s var(--ease)
}

.conversation {
  grid-column:1/-1;
  margin-top:40px;
  border-radius:var(--radius);
  padding:48px;
  background:linear-gradient(145deg,#f3edff,#f9f6ff)
}

.conversation[hidden] {
  display:none
}

.conversation-inner {
  max-width:920px;
  margin-inline:auto;
  display:grid;
  gap:20px
}

.message {
  max-width:80%;
  padding:24px 28px;
  border-radius:28px
}

.message-user {
  background:#ffe0c7;
  justify-self:end;
  border-bottom-right-radius:8px
}

.message-makar {
  background:#fff;
  justify-self:start;
  border-bottom-left-radius:8px
}

.speaker {
  display:block;
  font-size:16px;
  line-height:22px;
  font-weight:700;
  margin-bottom:8px;
  color:#5a4a40
}

.message-makar .speaker {
  color:#655276
}

.call {
  background:linear-gradient(125deg,#f0e8ff,#eae0ff)
}

.call:after {
  content:'';
  position:absolute;
  right:-130px;
  bottom:-350px;
  width:660px;
  height:570px;
  background:url("assets/illustrations/shape-lavender.svg") center/contain no-repeat;
  opacity:.16;
  pointer-events:none
}

.call-inner {
  position:relative;
  z-index:1;
  padding-block:72px
}

.call-copy>p+p {
  margin-top:24px
}

.call-copy .button {
  margin-top:32px
}

.inline-phone {
  white-space:nowrap;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:5px
}

.inline-phone:hover {
  color:#a94b00
}

.trial {
  padding-block:96px
}

.trial-copy>p+p {
  margin-top:20px
}

.conditions {
  color:var(--muted);
  font-size:18px;
  line-height:27px
}

.trial .button {
  margin-top:30px
}

.faq {
  padding-top:4px;
  padding-bottom:88px
}

.faq-list {
  border-top:1px solid var(--line)
}

.faq-list details {
  border-bottom:1px solid var(--line)
}

.faq summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:28px 0;
  font-size:26px;
  line-height:32px;
  font-weight:700;
  cursor:pointer;
  letter-spacing:-.015em
}

.faq summary::-webkit-details-marker {
  display:none
}

.faq summary svg {
  width:28px;
  height:28px;
  flex-shrink:0;
  transition:transform .2s var(--ease)
}

.faq summary:hover {
  color:#a94b00
}

.faq details[open] summary svg {
  transform:rotate(45deg)
}

.faq-answer {
  padding:0 44px 28px 0
}

.faq-answer p+p {
  margin-top:18px
}

.save-panel {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:var(--radius);
  padding:64px;
  background:linear-gradient(115deg,#fff6d9,#ffedb3)
}

.save-panel:after {
  content:'';
  position:absolute;
  right:-165px;
  bottom:-340px;
  width:800px;
  height:650px;
  z-index:-1;
  background:url("assets/illustrations/shape-yellow.svg") center/contain no-repeat;
  opacity:.38
}

.save-phone {
  display:block;
  width:fit-content;
  font-size:64px;
  line-height:72px;
  letter-spacing:-.03em;
  font-weight:800;
  margin-top:28px;
  white-space:nowrap
}

.save-phone:hover {
  color:#a94b00
}

.save-actions {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:32px
}

.share-status {
  position:absolute;
  bottom:24px;
  left:64px;
  font-size:15px;
  line-height:20px
}

.footer {
  padding-top:64px;
  padding-bottom:48px
}

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

.footer nav {
  display:flex;
  gap:36px
}

.footer nav button {
  padding:8px 0;
  border:0;
  background:none;
  font-size:18px;
  line-height:26px
}

.partners {
  margin-top:48px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px
}

.partners>p {
  font-size:16px;
  line-height:24px;
  max-width:210px;
  color:var(--muted)
}

.partner-logos {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:48px
}

.partner-logos img {
  width:130px;
  max-height:78px;
  object-fit:contain
}

.partner-logos img:last-child {
  width:150px
}

dialog {
  padding:40px;
  border:0;
  border-radius:32px;
  background:var(--paper);
  color:var(--ink);
  max-width:560px;
  width:calc(100% - 32px);
  box-shadow:0 20px 80px #23113226
}

dialog::backdrop {
  background:#19111d66
}

dialog h2 {
  font-size:36px;
  line-height:40px;
  margin:0 28px 30px 0
}

dialog p {
  font-size:20px;
  line-height:30px
}

dialog .button {
  margin-top:24px
}

.dialog-close {
  position:absolute;
  right:16px;
  top:16px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  border-radius:50%
}

.dialog-close:hover {
  background:var(--lavender)
}

.dialog-close svg {
  width:24px;
  height:24px
}

.auth-dialog form {
  display:grid;
  gap:10px
}

.auth-dialog label {
  font-size:18px;
  line-height:26px
}

.auth-dialog input {
  min-width:0;
  width:100%;
  border:1px solid #aaa29a;
  border-radius:16px;
  height:56px;
  padding:12px 16px;
  background:#fff;
  color:var(--ink);
  font-size:20px
}

.auth-dialog .button {
  margin-top:10px
}

.auth-dialog .button:disabled {
  background:#eae7e1;
  color:#655f58
}

.dialog-note {
  margin-top:20px;
  font-size:16px;
  line-height:24px;
  color:var(--muted)
}

@media(min-width:1441px) {
  .hero-art {
    right:-112px
  }
  .soft-panel {
    max-width:1600px;
    margin-inline:auto
  }
}

@media(max-width:1250px) {
  .shell {
    width:calc(100% - 96px)
  }
  .split,.character {
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    column-gap:48px
  }
  h1 {
    font-size:60px;
    line-height:66px
  }
  h2 {
    font-size:42px;
    line-height:48px
  }
  .hero-inner {
    height:570px
  }
  .hero-copy {
    width:720px
  }
  .hero-description {
    max-width:530px;
    font-size:24px;
    line-height:33px
  }
  .hero-art {
    right:-48px;
    width:660px;
    height:510px
  }
  .hero-makar {
    width:660px
  }
  .hero-shape {
    width:500px;
    height:510px
  }
  .hero-rays {
    left:490px;
    top:35px;
    width:56px
  }
  .character-art,.character-art img {
    width:100%
  }
  .situation {
    padding:28px
  }
  .situation-heading {
    gap:14px
  }
  .situation-heading h3 {
    font-size:23px;
    line-height:28px
  }
  .situation-heading img {
    max-width:44px
  }
  .situation p {
    font-size:18px;
    line-height:27px
  }
  .situation:after {
    left:50px
  }
  .header-phone {
    font-size:28px
  }
  .header {
    gap:30px
  }
}

@media(max-width:1000px) {
  :root {
    --section-space:64px
  }
  .shell {
    width:calc(100% - 64px)
  }
  h1 {
    font-size:52px;
    line-height:58px
  }
  h2 {
    font-size:36px;
    line-height:42px
  }
  .header {
    height:100px
  }
  .header-phone {
    font-size:25px
  }
  .login span {
    display:none
  }
  .hero-inner {
    height:620px;
    padding-top:40px
  }
  .hero-copy {
    width:100%
  }
  .hero-description {
    max-width:480px;
    font-size:22px;
    line-height:31px
  }
  .hero-art {
    width:520px;
    height:400px;
    right:-32px
  }
  .hero-makar {
    width:520px;
    bottom:0
  }
  .hero-shape {
    width:420px;
    height:400px;
    top:0
  }
  .hero-rays {
    left:425px;
    top:15px;
    width:48px
  }
  .hero-copy .button {
    margin-top:24px
  }
  .split,.character {
    column-gap:32px
  }
  .about-inner {
    padding-block:64px
  }
  .about-copy .lead {
    font-size:24px;
    line-height:30px
  }
  .underline {
    margin-top:32px
  }
  .when-grid {
    gap:16px
  }
  .situation {
    padding:24px;
    min-height:270px;
    border-radius:32px
  }
  .situation-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
    margin-bottom:18px;
    min-height:115px
  }
  .situation-heading img {
    height:40px;
    width:40px
  }
  .situation-heading h3 br {
    display:none
  }
  .character {
    padding-top:8px;
    padding-bottom:64px
  }
  .character-copy p {
    font-size:18px;
    line-height:27px
  }
  .button {
    font-size:20px;
    line-height:24px;
    padding:14px 24px
  }
  .trial {
    padding-block:72px
  }
  .faq {
    padding-top:0;
    padding-bottom:72px
  }
  .faq summary {
    font-size:23px;
    line-height:29px;
    padding-block:24px
  }
  .save-panel {
    padding:48px
  }
  .save-phone {
    font-size:56px;
    line-height:64px
  }
  .share-status {
    left:48px;
    bottom:18px
  }
  .footer nav {
    gap:24px
  }
  .partners {
    align-items:flex-start
  }
  .partner-logos {
    gap:24px
  }
  .partner-logos img {
    width:110px
  }
  .partner-logos img:last-child {
    width:120px
  }
}

@media(max-width:700px) {
  :root {
    --radius:28px;
    --section-space:48px;
    --body:18px;
    --body-line:27px
  }
  .shell {
    width:calc(100% - 40px)
  }
  h1 {
    font-size:40px;
    line-height:44px;
    letter-spacing:-.03em
  }
  h2 {
    font-size:34px;
    line-height:38px;
    letter-spacing:-.025em
  }
  h3,.lead {
    font-size:22px;
    line-height:28px
  }
  .header {
    height:auto;
    min-height:120px;
    display:grid;
    grid-template-columns:1fr auto;
    column-gap:20px;
    row-gap:12px;
    padding-block:20px
  }
  .brand img {
    width:136px
  }
  .header-phone {
    grid-column:1/-1;
    grid-row:2;
    font-size:23px;
    line-height:28px;
    margin-left:0
  }
  .login {
    grid-column:2;
    grid-row:1;
    font-size:16px;
    padding:8px 0 8px 8px
  }
  .login span {
    display:inline
  }
  .hero-inner {
    height:auto;
    padding-top:24px;
    padding-bottom:0
  }
  .hero-copy {
    width:100%
  }
  .hero h1 {
    white-space:normal
  }
  .hero h1 br {
    display:none
  }
  .hero h1 span {
    display:block
  }
  .hero-description {
    margin-top:22px;
    font-size:20px;
    line-height:28px;
    max-width:100%
  }
  .hero-intro {
    margin-bottom:10px
  }
  .hero-intro br {
    display:none
  }
  .hero-copy .button {
    margin-top:24px
  }
  .hero-art {
    position:relative;
    right:auto;
    bottom:auto;
    margin-top:24px;
    margin-left:-10px;
    width:calc(100% + 20px);
    height:auto;
    aspect-ratio:1.4
  }
  .hero-makar {
    width:100%;
    bottom:0
  }
  .hero-shape {
    width:78%;
    height:100%;
    right:0;
    top:0
  }
  .hero-rays {
    display:none
  }
  .button {
    min-height:54px;
    font-size:19px;
    line-height:24px;
    padding:14px 24px;
    gap:10px
  }
  .button svg {
    width:22px;
    height:22px
  }
  .split,.character {
    grid-template-columns:1fr;
    gap:28px
  }
  .about-inner {
    padding-block:40px
  }
  .about h2 br {
    display:none
  }
  .about-copy .lead {
    font-size:22px;
    line-height:28px
  }
  .about-copy>p+p {
    margin-top:20px
  }
  .underline {
    width:240px;
    height:12px;
    margin-top:22px
  }
  .about:before {
    width:620px;
    left:-320px;
    opacity:.12
  }
  .when h2 {
    margin-bottom:28px
  }
  .when-grid {
    grid-template-columns:1fr;
    gap:16px
  }
  .situation {
    min-height:0;
    padding:28px;
    border-radius:28px
  }
  .situation-heading {
    flex-direction:row;
    align-items:center;
    gap:18px;
    min-height:52px;
    margin-bottom:18px
  }
  .situation-heading h3 {
    font-size:24px;
    line-height:28px
  }
  .situation-heading h3 br {
    display:none
  }
  .situation-heading img {
    width:44px;
    height:48px;
    max-width:44px
  }
  .situation p {
    font-size:18px;
    line-height:27px;
    max-width:none
  }
  .situation:after {
    top:100px;
    left:45%;
    width:350px;
    height:220px
  }
  .character {
    padding-top:8px;
    padding-bottom:48px;
    gap:24px
  }
  .character-art {
    width:76%;
    max-width:330px;
    justify-self:center;
    padding-top:0
  }
  .character-art img {
    width:100%
  }
  .character-copy h2 {
    margin-bottom:22px
  }
  .character-copy h2 br {
    display:none
  }
  .character-copy p+p {
    margin-top:18px
  }
  .conversation-toggle {
    margin-top:24px
  }
  .conversation {
    grid-column:1;
    margin-top:0;
    padding:20px;
    border-radius:28px
  }
  .conversation-inner {
    gap:16px
  }
  .message {
    max-width:94%;
    padding:18px;
    border-radius:20px;
    font-size:17px;
    line-height:25px
  }
  .message-user {
    border-bottom-right-radius:6px
  }
  .message-makar {
    border-bottom-left-radius:6px
  }
  .speaker {
    font-size:14px;
    line-height:20px
  }
  .call-inner {
    padding-block:40px
  }
  .call h2 br {
    display:none
  }
  .call-copy>p+p {
    margin-top:20px
  }
  .call-copy .button {
    margin-top:26px
  }
  .trial {
    padding-block:48px
  }
  .trial h2 br {
    display:none
  }
  .trial-copy>p+p {
    margin-top:18px
  }
  .conditions {
    font-size:16px;
    line-height:24px
  }
  .trial .button {
    margin-top:24px
  }
  .faq {
    padding-top:0;
    padding-bottom:48px
  }
  .faq h2 br {
    display:none
  }
  .faq summary {
    font-size:22px;
    line-height:28px;
    gap:16px;
    padding-block:23px
  }
  .faq summary svg {
    width:24px;
    height:24px
  }
  .faq-answer {
    padding:0 10px 24px 0
  }
  .save-section {
    width:calc(100% - 24px)
  }
  .save-panel {
    padding:34px 24px 38px
  }
  .save-panel h2 {
    font-size:32px;
    line-height:36px
  }
  .save-phone {
    font-size:35px;
    line-height:44px;
    margin-top:24px;
    letter-spacing:-.03em
  }
  .save-actions {
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    margin-top:26px
  }
  .save-actions .button {
    font-size:18px;
    padding-inline:18px
  }
  .save-panel:after {
    width:600px;
    right:-320px;
    bottom:-280px;
    opacity:.25
  }
  .share-status {
    position:static;
    font-size:14px;
    line-height:20px
  }
  .share-status:empty {
    display:none
  }
  .footer {
    padding-top:40px;
    padding-bottom:32px
  }
  .footer-top {
    align-items:flex-start;
    flex-direction:column;
    gap:26px
  }
  .footer nav {
    flex-direction:column;
    align-items:flex-start;
    gap:12px
  }
  .footer nav button {
    padding:0;
    font-size:17px;
    line-height:25px
  }
  .partners {
    margin-top:32px;
    flex-direction:column;
    gap:24px
  }
  .partners>p {
    max-width:none;
    font-size:15px;
    line-height:22px
  }
  .partner-logos {
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    align-items:center
  }
  .partner-logos img,.partner-logos img:last-child {
    width:100%;
    max-height:72px
  }
  dialog {
    padding:30px 24px;
    border-radius:26px
  }
  dialog h2 {
    font-size:30px;
    line-height:34px
  }
  dialog p {
    font-size:18px;
    line-height:27px
  }
  .dialog-note {
    font-size:15px;
    line-height:22px
  }
}

@media(max-width:370px) {
  h1 {
    font-size:36px;
    line-height:40px
  }
  h2 {
    font-size:31px;
    line-height:35px
  }
  .button {
    padding-inline:20px;
    font-size:18px
  }
  .save-phone {
    font-size:31px;
    line-height:40px
  }
  .save-panel {
    padding-inline:20px
  }
  .save-actions .button {
    font-size:16px;
    padding-inline:12px
  }
  .situation {
    padding:24px
  }
  .situation-heading h3 {
    font-size:22px;
    line-height:26px
  }
}

/* Navigation, revised panels and chat. */
:root {
  --header-height:105px;
  --motion-ease:cubic-bezier(.23,.68,.27,1);
  --control-motion:380ms var(--motion-ease)
}

html {
  scroll-padding-top:calc(var(--header-height) + 24px)
}

.scroll-sentinel {
  position:absolute;
  top:0;
  left:0;
  width:1px;
  height:1px;
  pointer-events:none
}

.header-bar {
  position:sticky;
  top:0;
  z-index:80;
  background:var(--paper);
  transition:box-shadow var(--control-motion)
}

.header-bar.is-scrolled {
  box-shadow:0 1px 0 #19191b0d,0 8px 28px #35234c08
}

.header {
  position:relative
}

.about:before {
  left:-330px
}

.character-art {
  position:relative;
  isolation:isolate
}

.character-art:before {
  content:'';
  position:absolute;
  z-index:-1;
  left:-8%;
  top:8%;
  width:112%;
  height:86%;
  background:url("assets/illustrations/shape-purple.svg") center/100% 100% no-repeat;
  transform:rotate(-24deg);
  pointer-events:none
}

.character-art>img {
  position:relative
}

.call:after {
  right:-260px
}

.trial-panel .trial-copy>p+p {
  margin-top:20px
}

.trial-panel .button {
  margin-top:30px
}

.trial-panel .conditions {
  max-width:590px;
  color:#51465d
}

.faq {
  padding-top:88px;
  grid-template-columns:minmax(0,658px) minmax(0,470px)
}

.faq-aside {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 20px;
}

.faq-list {
  grid-column:1;
  grid-row:1
}

.number-art {
  width: auto;
  max-width: 100%;
  object-fit: contain;
  justify-self: center;
}

.save-copy > p {
  margin-top: 14px;
}

@media (min-width: 901px) {
  .faq, .save-panel {
    --number-art-height: clamp(412px, 52vw, 710px);
    --number-art-right: clamp(30px, 7.6vw, 110px);
  }
  .faq {
    position: relative;
    z-index: 1;
  }
  .number-art {
    position: absolute;
    inset-inline-end: var(--number-art-right);
    bottom: calc(-1 * clamp(230px, 28vw, 408px));
    height: var(--number-art-height);
    pointer-events: none;
  }
  .save-panel {
    padding-inline-end: calc(var(--number-art-right) + var(--number-art-height) / 2 + 28px);
  }
  .save-phone {
    font-size: clamp(36px, 4.5vw, 64px);
    line-height: 1.125;
  }
}

.conversation {
  width:min(100%,760px);
  margin-inline:auto;
  padding:0 26px 26px;
  border-radius:32px;
  background:#f2edfc;
  overflow:hidden
}

.chat-header {
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 0;
  margin-bottom:10px;
  border-bottom:1px solid #ddd4ed
}

.chat-header strong {
  font-size:18px;
  line-height:24px;
  font-weight:700
}

.chat-avatar {
  display:block;
  width:34px;
  height:34px;
  overflow:hidden;
  border-radius:50%;
  flex-shrink:0
}

.chat-avatar img {
  width:109px;
  height:34px;
  max-width:none
}

.conversation-inner {
  max-width:none;
  gap:12px
}

.message {
  width:fit-content;
  max-width:86%;
  padding:14px 18px;
  border-radius:22px;
  font-size:17px;
  line-height:25px
}

.message-user {
  background:#ffdfc4;
  border-bottom-right-radius:5px
}

.message-makar {
  background:#fff;
  border-bottom-left-radius:5px
}

.speaker {
  font-size:12px;
  line-height:17px;
  margin-bottom:5px;
  font-weight:700
}

.message code {
  font:inherit;
  font-size:.94em;
  overflow-wrap:anywhere;
  background:#f1edf6;
  padding:1px 4px;
  border-radius:5px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone
}

.mobile-contact {
  display:none
}

.save-copy>.contact-caption {
  font-size:16px;
  line-height:24px;
  color:#62502d;
  max-width:620px;
  margin-top:22px
}

.auth-dialog,.share-dialog {
  max-height:calc(100dvh - 32px);
  overscroll-behavior:contain
}

.auth-dialog {
  max-width:470px;
  padding:34px
}

.auth-dialog h2,.share-dialog h2 {
  font-size:32px;
  line-height:36px;
  margin:0 30px 22px 0
}

.auth-tabs {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
  background:#eee8f8;
  padding:4px;
  border-radius:18px;
  margin-bottom:24px
}

.auth-tabs [role=tab] {
  min-height:44px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:#574867;
  font-size:17px;
  line-height:24px;
  font-weight:700;
  padding:8px 10px;
  transition:background-color var(--control-motion),color var(--control-motion),box-shadow var(--control-motion)
}

.auth-tabs [aria-selected=true] {
  color:var(--ink);
  background:var(--paper);
  box-shadow:0 1px 2px #24143115
}

.auth-dialog form {
  gap:16px
}

.auth-field {
  display:grid;
  gap:6px;
  min-width:0
}

.auth-dialog label {
  font-size:16px;
  line-height:22px;
  font-weight:700
}

.auth-dialog input {
  height:52px;
  font-size:17px;
  background:var(--paper);
  border-color:#c9bfd0
}

.auth-dialog input::placeholder {
  color:#695f6d
}

.password-field {
  position:relative;
  min-width:0
}

.password-field input {
  padding-right:105px
}

.password-toggle {
  position:absolute;
  inset:4px 4px 4px auto;
  min-width:88px;
  padding:0 8px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#5f4380;
  font-size:14px;
  line-height:20px;
  font-weight:700
}

.password-toggle:hover {
  background:#f0e9f7
}

.auth-dialog .auth-submit {
  margin-top:4px;
  font-size:20px;
  line-height:24px;
  min-height:52px;
  background:#e96300
}

.auth-dialog .auth-submit:hover {
  background:#d75900
}

.auth-dialog .dialog-note {
  margin-top:14px;
  font-size:14px;
  line-height:21px;
  color:#5d5364
}

.share-dialog {
  max-width:486px;
  padding:30px
}

.share-preview {
  display:flex;
  align-items:center;
  gap:14px;
  background:#f4effc;
  padding:16px 18px;
  border-radius:20px
}

.share-preview .chat-avatar {
  width:40px;
  height:40px
}

.share-preview .chat-avatar img {
  width:128px;
  height:40px
}

.share-preview>div {
  display:grid;
  gap:2px;
  min-width:0
}

.share-preview strong {
  font-size:17px;
  line-height:22px;
  font-weight:800
}

.share-preview>div>span {
  font-size:14px;
  line-height:19px;
  color:#625372
}

.share-preview b {
  font-size:22px;
  line-height:28px;
  letter-spacing:-.02em;
  margin-top:4px;
  white-space:nowrap
}

.share-apps {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:14px 0 12px
}

.share-apps>button,.share-apps>a {
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  min-height:80px;
  background:transparent;
  border:0;
  border-radius:15px;
  padding:6px 3px;
  font-size:13px;
  line-height:19px;
  font-weight:700;
  transition:background-color var(--control-motion)
}

.share-app-icon {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:15px;
  font-size:15px;
  font-weight:800
}

.share-app-icon svg {
  width:23px;
  height:23px
}

.share-app-icon.telegram {
  background:#e1f2fc;
  color:#17618e
}

.share-app-icon.vk {
  background:#e5edff;
  color:#27539d
}

.share-app-icon.max {
  background:#ebe1ff;
  color:#5a3b9a;
  font-size:12px
}

.share-actions {
  display:grid;
  border-top:1px solid var(--line)
}

.share-actions>button,.share-actions>a {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:46px;
  padding:8px 10px;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  font-size:16px;
  line-height:22px;
  text-align:left;
  transition:background-color var(--control-motion)
}

.share-actions svg {
  width:21px;
  height:21px;
  flex-shrink:0;
  color:#635078
}

.share-actions [data-copy-number] {
  font-weight:800
}

.share-apps>button:hover,.share-apps>a:hover,.share-actions>button:hover,.share-actions>a:hover {
  background:#f4effa
}

.share-dialog .share-status {
  position:static;
  min-height:0;
  margin:0;
  font-size:15px;
  line-height:22px;
  color:#51445e
}

.share-dialog .share-status:not(:empty) {
  margin-top:16px
}

.share-status .manual-copy {
  display:block;
  width:100%;
  min-height:76px;
  resize:vertical;
  margin-top:10px;
  padding:10px;
  border:1px solid #b3a4c4;
  border-radius:10px;
  font:inherit;
  color:var(--ink);
  background:#fff
}

.motion-target {
  transform-origin:center
}

.login svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.login, .header-phone, .save-phone, .footer nav button, .faq summary {
  transition: color var(--control-motion);
}

.login:is(:hover, :focus-visible) {
  color: #a94b00;
}

.dialog-close, .password-toggle {
  transition: background-color var(--control-motion);
}

.button {
  transition: background-color var(--control-motion), color var(--control-motion),
    border-color var(--control-motion), box-shadow var(--control-motion);
}

.button:focus-visible {
  box-shadow: 0 0 0 4px #dec9f56b;
}

.conversation-toggle svg, .faq summary svg {
  transition: transform 460ms var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    box-shadow: 0 0 0 5px #ffc7845c;
  }
  .button-outline:hover {
    background-color: #f1e8ff;
    color: #4d336b;
    border-color: #8765a9;
    box-shadow: 0 0 0 5px #d9c7f65c;
  }
}

.button:active {
  box-shadow: inset 0 0 0 999px #2e180b19;
}

@media(max-width:1250px) {
  .faq {
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)
  }
}

@media(max-width:1000px) {
  :root {
    --header-height:100px
  }
  .conversation {
    width:min(100%,700px)
  }
  .faq {
    padding-top:72px
  }
}

@media (max-width: 900px) {
  .faq {
    grid-template-columns: minmax(0, 1fr);
  }
  .faq-aside {
    grid-column: 1;
    grid-row: 1;
  }
  .number-art {
    display: none;
  }
  .faq-list {
    grid-row: 2;
  }
  .save-copy {
    text-align: center;
  }
  .save-phone, .save-copy > .contact-caption {
    margin-inline: auto;
  }
  .save-actions {
    width: min(100%, 420px);
    margin-inline: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .mobile-contact {
    display: inline-flex;
  }
}

@media(max-width:700px) {
  :root {
    --header-height:120px
  }
  .hero-inner {
    padding-bottom:40px
  }
  .about:before {
    left:-470px
  }
  .character-art:before {
    left:-12%;
    top:10%;
    width:118%;
    height:82%;
    transform:rotate(-29deg)
  }
  .conversation {
    width:100%;
    padding:0 14px 18px;
    border-radius:28px
  }
  .chat-header {
    gap:8px;
    padding-block:16px;
    margin-bottom:6px
  }
  .chat-header strong {
    font-size:16px;
    line-height:22px
  }
  .message {
    max-width:92%;
    padding:13px 15px;
    font-size:16px;
    line-height:24px;
    border-radius:20px
  }
  .message-user {
    border-bottom-right-radius:5px
  }
  .message-makar {
    border-bottom-left-radius:5px
  }
  .trial-panel .button {
    margin-top:24px
  }
  .faq {
    padding-top:48px
  }
  .save-copy > p {
    margin-top: 16px;
  }
  .save-copy>.contact-caption {
    font-size:14px;
    line-height:21px;
    margin-top:20px
  }
  .auth-dialog {
    padding:27px 22px 24px
  }
  .auth-dialog h2,.share-dialog h2 {
    font-size:27px;
    line-height:32px;
    margin-bottom:18px
  }
  .auth-tabs [role=tab] {
    font-size:16px
  }
  .auth-dialog .auth-submit {
    font-size:18px
  }
  .share-dialog {
    position:fixed;
    inset:auto 0 0;
    margin:0 auto;
    width:100%;
    max-width:520px;
    max-height:calc(100dvh - 16px);
    border-radius:28px 28px 0 0;
    padding:24px 20px calc(20px + env(safe-area-inset-bottom))
  }
  .share-preview {
    padding:14px;
    gap:12px
  }
  .share-preview b {
    font-size:20px;
    line-height:26px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none
  }
  .header-bar,.login,.header-phone,.save-phone,.footer nav button,.faq summary,
  .dialog-close,.password-toggle,.auth-tabs [role=tab],.button,.conversation-toggle svg,
  .faq summary svg,.share-apps>button,.share-apps>a,.share-actions>button,.share-actions>a {
    transition:none
  }
}

.conversation-reveal, .faq-reveal {
  display: flow-root;
}

.conversation-reveal {
  grid-column: 1 / -1;
}

.conversation-reveal[hidden] {
  display: none;
}

.is-sizing {
  overflow: hidden;
}

.faq summary[aria-expanded="false"] svg {
  transform: none;
}

.conversation-toggle[aria-expanded="true"] svg, .faq summary[aria-expanded="true"] svg {
  transition: transform 520ms cubic-bezier(.45, 0, .3, 1);
}

dialog::backdrop {
  opacity: 1;
  transition: opacity 520ms cubic-bezier(.45, 0, .3, 1);
}

dialog[data-closing]::backdrop {
  opacity: 0;
  transition: opacity 420ms cubic-bezier(.4, 0, .2, 1);
}

@starting-style {
  dialog::backdrop {
    opacity: 0;
  }
}

@media (max-width: 700px) {
  .character {
    row-gap: 0;
  }
  .character-copy, .conversation {
    margin-block-start: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  dialog::backdrop, dialog[data-closing]::backdrop,
  .conversation-toggle[aria-expanded="true"] svg, .faq summary[aria-expanded="true"] svg {
    transition: none;
  }
}