/* The product journey: atmosphere first, information in clear scenes. */
.hero {
  position:relative;
  min-height:850px;
  min-height:850px;
  min-height:max(850px,100svh);
  overflow:hidden;
  background:#091714
}
.hero-light {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  inset:0;
  background:radial-gradient(ellipse at 75% 42%,#405543 0%,#1c3329 24%,transparent 55%),linear-gradient(120deg,#0b1916 15%,#0e201b 80%);
  pointer-events:none
}
.hero-light:after {
  content:"";
  position:absolute;
  width:1000px;
  height:1000px;
  border-radius:50%;
  right:-400px;
  top:-650px;
  border:1px solid #b6cc9740;
  box-shadow:0 0 180px 60px #73976418
}
.hero-grid {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.12fr;
  align-items:center;
  min-height:770px;
  min-height:770px;
  min-height:max(770px,calc(100svh - 82px));
  padding-top:100px;
  padding-bottom:32px;
  gap:10px
}
.hero-copy {
  position:relative;
  z-index:4;
  padding-bottom:15px
}
.hero .eyebrow {
  color:#bbcebd;
  margin-bottom:34px
}
.hero h1 {
  font-size:clamp(52px,4.2vw,60px);
  line-height:1.2;
  letter-spacing:-.012em;
  font-weight:400
}
.hero h1 span {
  color:#d2e3b9
}
.hero-intro {
  font-size:18px;
  line-height:1.95;
  color:#b6c5ba;
  margin-top:32px
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:40px
}
.watch-link {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  white-space:nowrap
}
.play-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #a3b4a070;
  border-radius:50%;
  width:33px;
  height:33px;
  font-size:16px
}
.watch-link:hover .play-icon {
  background:#d4efa829
}
.hero-note {
  font-size:14px;
  color:#8ba08f;
  margin-top:20px
}
.hero-scene {
  position:relative;
  width:100%;
  height:660px;
  isolation:isolate
}
.scene-orbit {
  position:absolute;
  width:91%;
  aspect-ratio:1;
  right:-2%;
  top:6%;
  border:1px solid #b4cca128;
  border-radius:50%;
  transform:rotate(-28deg);
  box-shadow:inset 28px 15px 110px #b1ca7540,inset -18px -35px 65px #03150bcc,0 40px 100px #0002;
  background:linear-gradient(135deg,#b2c79116,#3b553844 50%,#112d210a);
  z-index:-1
}
.scene-orbit:after {
  content:"";
  position:absolute;
  top:7%;
  right:7%;
  bottom:7%;
  left:7%;
  inset:7%;
  border:1px solid #afc3971c;
  border-radius:50%
}
.scene-floor {
  position:absolute;
  bottom:50px;
  left:5%;
  width:95%;
  height:120px;
  background:radial-gradient(ellipse,#010d0999,transparent 68%)
}
.product-art {
  position:absolute;
  width:48%;
  top:5%;
  left:8%;
  z-index:2;
  transform:rotate(-9deg);
  animation:product-arrive 1.5s var(--ease) both
}
.product-art>img {
  width:100%;
  height:auto;
  filter:drop-shadow(18px 35px 18px #00100644)
}
.product-caption {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:14px;
  color:#c1d0b8;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid #c3d9b82a;
  letter-spacing:.08em
}
.product-caption i {
  width:5px;
  height:5px;
  background:#d4efa8;
  border-radius:50%
}
.origin-tag {
  position:absolute;
  top:78%;
  left:0;
  z-index:5;
  border-left:1px solid #c3d9b85c;
  padding-left:15px;
  display:flex;
  flex-direction:column;
  max-width:42%;
  font-size:14px;
  color:#c0cfb4;
  animation:fade-up 1s .3s var(--ease) both
}
.origin-tag b {
  font-weight:400;
  font-size:15px;
  color:#e5eddc;
  margin:2px 0
}
.origin-tag small {
  font-size:14px;
  letter-spacing:.08em;
  color:#a3b39a
}
.transfer-path {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  overflow:visible
}
.transfer-path path {
  fill:none;
  stroke:#c6e49a66;
  stroke-width:1;
  stroke-dasharray:3 6
}
.transfer-path circle {
  fill:#d4efa8
}
.draft-card {
  position:absolute;
  width:49%;
  min-width:260px;
  right:0;
  top:25%;
  background:#f1f3e9;
  border-radius:13px;
  color:#203027;
  box-shadow:0 22px 70px #0005;
  border:1px solid #d9e5ce;
  z-index:3;
  transform:rotate(5deg);
  animation:draft-arrive 1.4s .3s var(--ease) both;
  overflow:hidden
}
.draft-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 20px;
  border-bottom:1px solid #26342112
}
.ozon-word {
  font-family:Geist,"Site Sans",sans-serif;
  font-size:17px;
  font-weight:600;
  letter-spacing:-.05em
}
.draft-state {
  font-size:12px;
  color:#587044;
  display:flex;
  align-items:center;
  gap:6px
}
.draft-state i {
  width:4px;
  height:4px;
  background:#769849;
  border-radius:50%
}
.draft-photo {
  height:135px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(140deg,#e4e8d9,#d2d9c5)
}
.draft-photo img {
  height:215px;
  width:auto;
  position:absolute;
  top:-35px;
  left:50%;
  transform:translateX(-50%)
}
.draft-photo>span {
  position:absolute;
  right:16px;
  bottom:9px;
  font-family:Geist,"Site Sans",sans-serif;
  font-size:12px;
  color:#6f7a66
}
.draft-body {
  padding:19px 20px 0
}
.draft-category {
  font-size:12px;
  color:#7b8776;
  margin-bottom:8px
}
.draft-title {
  font-size:20px;
  line-height:1.25;
  font-weight:600;
  letter-spacing:0
}
.draft-properties {
  display:flex;
  gap:25px;
  margin:19px 0;
  flex-wrap:wrap;
  font-size:14px;
  color:#56634f
}
.draft-properties b {
  font-weight:400;
  margin-left:6px;
  color:#273822
}
.draft-ready {
  margin:0 -20px;
  display:flex;
  align-items:center;
  gap:10px;
  background:#e3ebd6;
  padding:15px 18px;
  border-top:1px solid #cad6ba
}
.check-round {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  background:#415d36;
  color:#ecf6dd;
  border-radius:50%;
  font-size:12px;
  flex:none
}
.draft-ready>div {
  display:flex;
  flex-direction:column;
  line-height:1.6
}
.draft-ready b {
  font-size:14px;
  font-weight:400
}
.draft-ready div>span {
  font-size:12px;
  color:#516343
}
.draft-ready>span:last-child {
  margin-left:auto;
  font-size:20px
}
.scene-annotation {
  position:absolute;
  right:0;
  top:3%;
  bottom:auto;
  font-size:14px;
  color:#c0cfb4;
  letter-spacing:.04em;
  display:flex;
  gap:20px
}
.hero-bottom {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #e8f7e111;
  padding-block:24px;
  color:#95aa9a;
  font-size:14px;
  gap:20px
}
.hero-bottom>a {
  color:#d1ddcc;
  display:flex;
  gap:25px
}
.example-label {
  font-size:12px;
  opacity:.8
}
.intro {
  padding-top:110px;
  padding-bottom:55px
}
.section-overline {
  display:flex;
  justify-content:space-between;
  font-size:14px;
  color:#69725e;
  border-bottom:1px solid #cad0bf;
  padding-bottom:22px;
  margin-bottom:62px;
  letter-spacing:.06em
}
.section-overline>span:last-child {
  font-family:Geist,"Site Sans",sans-serif
}
.intro-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:80px;
  align-items:end
}
.intro h2 {
  font-size:clamp(38px,3.2vw,46px);
  line-height:1.4
}
.intro-grid>p {
  font-size:18px;
  color:#69735f;
  line-height:2;
  padding-bottom:6px
}
.story {
  padding-bottom:110px
}
.story-grid {
  display:grid;
  grid-template-columns:1.13fr 1fr;
  gap:clamp(55px,9vw,155px);
  align-items:start
}
.story-visual {
  position:sticky;
  top:65px;
  padding-top:20px
}
.story-tabs {
  display:flex;
  gap:22px;
  margin-bottom:23px;
  border-bottom:1px solid #cbd1c0
}
.story-tabs button {
  background:none;
  color:#5e6e54;
  padding:12px 0 15px;
  border:0;
  border-bottom:2px solid transparent;
  font-size:14px;
  border-radius:0;
  white-space:nowrap
}
.story-tabs button.is-active {
  color:#243220;
  border-bottom-color:#243220
}
.story-tabs button:hover {
  color:#243220
}
.story-canvas {
  height:auto;
  min-height:535px;
  background:#dfe5d3;
  position:relative;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
  overflow:hidden;
  isolation:isolate
}
.canvas-aura {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  inset:0;
  width:100%;
  height:100%;
  background:radial-gradient(circle,#fbfff030,transparent 63%);
  z-index:-1
}
.story-screen {
  width:100%;
  max-width:430px;
  border-radius:8px;
  overflow:hidden;
  background:#fffef7;
  box-shadow:0 18px 45px #41533315;
  animation:screen-in .7s var(--ease) both;
  min-height:380px
}
.mini-browser {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  color:#5e6e54;
  padding:15px 17px;
  border-bottom:1px solid #e5e9de
}
.mini-browser>span:first-child {
  display:flex;
  gap:4px
}
.mini-browser i {
  width:4px;
  height:4px;
  background:#cfd6c5;
  border-radius:50%
}
.mini-browser>span:last-child {
  font-family:Geist,"Site Sans",sans-serif
}
.source-strip {
  margin:25px 25px 0;
  display:flex;
  gap:20px;
  align-items:center
}
.source-strip>img {
  width:88px;
  height:100px;
  object-fit:contain;
  background:#edf0e5;
  border-radius:4px
}
.tiny-label {
  font-size:12px;
  letter-spacing:.05em;
  color:#5e6e54
}
.source-strip h3 {
  font-size:16px;
  margin:7px 0 6px
}
.source-strip p {
  font-size:14px;
  color:#5e6e54;
  line-height:1.8
}
.translation-line {
  display:flex;
  align-items:center;
  gap:13px;
  margin:24px 25px;
  color:#5e6e54;
  font-size:12px
}
.line-track {
  height:1px;
  position:relative;
  background:#dce2d2;
  flex:1;
  overflow:hidden
}
.line-track i {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  inset:0;
  width:30%;
  background:#91af5d;
  animation:translate-line 3s ease-in-out infinite
}
.generated-copy {
  position:relative;
  padding:20px 25px;
  background:#f1f4e8
}
.generated-copy p {
  font-size:19px;
  line-height:1.5;
  color:#273621;
  margin-top:8px;
  letter-spacing:0
}
.content-cursor {
  display:inline-block;
  width:3px;
  height:15px;
  background:#90a66e;
  position:absolute;
  right:22px;
  bottom:27px;
  animation:blink 1.6s ease infinite
}
.prepared-row {
  display:flex;
  justify-content:space-between;
  padding:23px 25px;
  font-size:12px;
  color:#5e6e54;
  gap:10px
}
.prepared-row b {
  font-size:12px;
  font-weight:400;
  color:#354d2b;
  margin-left:10px
}
.question-art {
  height:138px;
  background:#eef1e5;
  overflow:hidden
}
.question-art img {
  height:225px;
  width:auto;
  margin:-44px auto 0;
  transform:rotate(-6deg)
}
.question-body {
  padding:22px 28px
}
.question-body h3 {
  font-size:23px;
  margin:4px 0 7px;
  letter-spacing:0
}
.question-body>p {
  font-size:14px;
  color:#5e6e54
}
.size-options {
  display:flex;
  gap:10px;
  margin-top:20px
}
.size-options button {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:1px solid #d7dfc9;
  background:#fffef7;
  color:#78866c;
  border-radius:5px;
  width:100px;
  padding:11px 15px;
  font-family:Geist,"Site Sans",sans-serif;
  font-size:14px;
  min-height:44px
}
.size-options button.is-selected {
  background:#e8efd8;
  border-color:#91a873;
  color:#314e23
}
.question-body>.demo-selection {
  font-size:12px;
  margin-top:13px;
  color:#5e6e54
}
.confirm-heading {
  padding:28px;
  display:flex;
  gap:17px;
  align-items:center
}
.confirm-heading h3 {
  font-weight:600;
  font-size:22px;
  line-height:1.5;
  letter-spacing:0
}
.confirm-check {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex:none;
  background:#dfeccb;
  border-radius:50%;
  color:#4f6d3b
}
.confirm-list {
  margin:0 28px
}
.confirm-list>div {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:14px 0;
  border-bottom:1px solid #e9ecdf;
  font-size:14px
}
.confirm-list dt {
  color:#5e6e54
}
.confirm-list dd {
  margin:0;
  color:#33472a
}
.confirm-list dd span {
  margin-left:12px;
  color:#7d9666
}
.confirm-foot {
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:24px 28px;
  font-size:12px;
  color:#5e6e54
}
.demo-pill {
  border:1px solid #dbe1d1;
  border-radius:15px;
  padding:0 7px;
  font-size:12px
}
.canvas-caption {
  margin-top:17px;
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:12px;
  color:#5e6e54
}
.canvas-caption>span:last-child {
  white-space:nowrap
}
.chapter {
  min-height:660px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:80px;
  opacity:1;
  transition:opacity .8s var(--ease)
}
.chapter.is-active {
  opacity:1
}
.chapter.is-active .chapter-number {
  color:#33472a;
  font-weight:600
}
.chapter-number {
  font-size:14px;
  color:#5e6e54;
  margin-bottom:27px;
  letter-spacing:.1em
}
.chapter h2 {
  font-size:clamp(38px,3.2vw,46px);
  line-height:1.45;
  font-weight:400
}
.chapter>p {
  font-size:18px;
  line-height:2;
  color:#5e6e54;
  margin-top:25px;
  max-width:340px
}
.chapter-foot {
  font-size:14px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid #d4d9c9;
  margin-top:34px;
  padding-top:17px;
  color:#5e6e54;
  max-width:340px
}
.care {
  padding:120px 0 110px;
  background:#11261e;
  position:relative;
  isolation:isolate;
  overflow:hidden
}
.care-orbit {
  position:absolute;
  width:800px;
  height:800px;
  right:-350px;
  top:-260px;
  border:1px solid #b2d58820;
  border-radius:50%;
  box-shadow:inset 25px 0 100px #84ad3e13,0 0 0 80px #bed79a03;
  z-index:-1
}
.care .eyebrow {
  color:#abc691
}
.care-top {
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  gap:clamp(80px,7vw,120px);
  margin-top:32px
}
.care h2 {
  font-size:clamp(42px,4vw,46px);
  line-height:1.35
}
.care h2 span {
  color:#cfdfb8
}
.care-top>p {
  font-size:16px;
  color:#99ad93;
  line-height:1.9;
  padding-bottom:15px;
  max-width:360px;
  margin-right:0
}
.care-items {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
  margin-top:68px
}
.care-items article {
  border-top:1px solid #c8deb02c;
  padding-top:25px
}
.care-icon {
  font-family:Geist,"Site Sans",sans-serif;
  color:#9eb087;
  font-size:14px
}
.care-items h3 {
  font-size:20px;
  font-weight:600;
  margin:22px 0 15px
}
.care-items p {
  font-size:16px;
  color:#a0b19a;
  line-height:1.9;
  max-width:295px
}
.pricing {
  padding-block:125px
}
.pricing-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(380px,475px);
  gap:clamp(48px,6vw,80px);
  align-items:center
}
.care .wrap {
  max-width:1320px
}
.pricing-grid {
  max-width:1160px
}
.pricing .eyebrow,.faq .eyebrow {
  font-size:14px;
  letter-spacing:.1em;
  color:#5e6e54;
  margin-bottom:32px
}
.pricing h2,.faq h2 {
  font-size:clamp(42px,3.8vw,46px);
  line-height:1.4
}
.section-copy {
  margin-top:27px;
  font-size:16px;
  color:#5e6e54;
  line-height:2
}
.pricing .text-link {
  margin-top:30px
}
.plan {
  max-width:475px;
  width:100%;
  margin-left:auto;
  border:1px solid #c6ceba;
  border-radius:8px;
  padding:35px 38px;
  background:#eff1e6
}
.plan-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}
.plan-title h3 {
  font-size:18px
}
.plan-title>span {
  font-size:12px;
  border:1px solid #c5cfb6;
  border-radius:20px;
  padding:3px 9px;
  color:#5e6e54
}
.price {
  font-family:Geist,"Site Sans",sans-serif;
  font-size:64px;
  font-weight:400;
  letter-spacing:-.035em;
  line-height:1.2;
  margin-top:25px
}
.price>span {
  font-size:33px;
  vertical-align:top;
  margin:15px 8px 0 0;
  display:inline-block;
  letter-spacing:-.02em
}
.price small {
  font-family:var(--font);
  font-size:13px;
  color:#536449;
  letter-spacing:0;
  margin-left:12px
}
.plan>p {
  font-size:16px;
  color:#5e6e54;
  line-height:1.8;
  margin-top:13px
}
.plan ul {
  list-style:none;
  margin:28px 0;
  padding:23px 0 0;
  border-top:1px solid #d0d8c3;
  font-size:16px;
  color:#586d49;
  display:grid;
  gap:11px
}
.plan li:before {
  content:"✓";
  font-family:Geist,"Site Sans",sans-serif;
  color:#698547;
  margin-right:14px
}
.plan>.btn {
  width:100%;
  justify-content:space-between
}
.faq {
  padding-bottom:130px
}
.faq-grid {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:100px;
  border-top:1px solid #cbd2be;
  padding-top:70px
}
.faq-list details {
  border-bottom:1px solid #d1d7c7
}
.faq-list summary {
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  font-size:15px;
  cursor:pointer;
  padding:25px 0
}
.faq-list summary::-webkit-details-marker {
  display:none
}
.faq-list summary>span {
  font-family:Geist,"Site Sans",sans-serif;
  font-size:22px;
  color:#5e6e54;
  transition:transform .3s
}
.faq-list details[open] summary>span {
  transform:rotate(45deg)
}
.ans p {
  font-size:16px;
  line-height:1.95;
  color:#6e7c62;
  padding-bottom:27px;
  max-width:510px
}
.final {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#1c382a;
  padding-block:115px
}
.final-ribbon {
  position:absolute;
  width:620px;
  height:620px;
  border:1px solid #cfeba12a;
  border-radius:50%;
  top:-360px;
  left:20%;
  box-shadow:0 0 0 65px #cbe69b05,inset 50px 0 130px #cae39612;
  z-index:-1;
  transform:rotate(-30deg)
}
.final-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:90px
}
.final .eyebrow {
  font-size:14px;
  color:#a6c095;
  margin-bottom:30px
}
.final h2 {
  font-size:46px;
  line-height:1.4
}
.start-form-wrap>p {
  font-size:16px;
  color:#bed0b4;
  margin-bottom:23px
}
.paste {
  display:flex;
  flex-direction:column;
  gap:13px
}
.field {
  display:flex;
  align-items:center;
  gap:13px;
  padding:0 19px;
  border:1px solid #cee3b640;
  background:#10261c66;
  border-radius:5px;
  min-height:60px
}
.input-link {
  font-family:Geist,"Site Sans",sans-serif;
  font-size:23px;
  color:#a7c393
}
.field:focus-within {
  border-color:#cbe4a4
}
.field input {
  width:100%;
  min-width:0;
  outline:none;
  border:0;
  background:none;
  color:#f3f8eb;
  font-size:16px;
  line-height:1.5;
  padding:18px 0
}
.field input::placeholder {
  color:#8da680
}
.paste>.btn {
  border-radius:5px;
  width:100%;
  min-height:56px;
  justify-content:space-between;
  padding-inline:22px
}
.paste-msg {
  min-height:30px;
  font-size:14px!important;
  color:#a0b990!important;
  line-height:1.7;
  margin:13px 0 0!important
}
.paste-msg.is-error {
  color:#ffbfa4!important
}
.start-meta {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid #adc19327;
  margin-top:17px;
  padding-top:17px;
  font-size:14px;
  color:#93ad82
}
.start-meta a {
  color:#c6dbb7
}
.motion-paused *,.motion-paused *:before,.motion-paused *:after {
  animation-play-state:paused!important
}
@keyframes product-arrive {
  from {
    opacity:0;
    transform:translate(-22px,25px) rotate(-12deg)
  }
  to {
    opacity:1;
    transform:rotate(-9deg)
  }
}
@keyframes draft-arrive {
  from {
    opacity:0;
    transform:translate(35px,45px) rotate(8deg)
  }
  to {
    opacity:1;
    transform:rotate(5deg)
  }
}
@keyframes fade-up {
  from {
    opacity:0;
    translate:0 12px
  }
  to {
    opacity:1;
    translate:0 0
  }
}
@keyframes screen-in {
  from {
    opacity:0;
    transform:translateY(14px)
  }
  to {
    opacity:1;
    transform:none
  }
}
@keyframes translate-line {
  0% {
    transform:translateX(-120%)
  }
  100% {
    transform:translateX(430%)
  }
}
@keyframes blink {
  0%,45%,100% {
    opacity:.2
  }
  60%,80% {
    opacity:1
  }
}
@media(min-width:1600px) {
  .hero-scene {
    height:720px
  }
  .draft-card {
    top:24%
  }
  .draft-photo {
    height:160px
  }
  .draft-photo img {
    height:260px;
    top:-45px
  }
}
@media(max-width:1180px) {
  .hero-grid {
    grid-template-columns:1fr 1fr;
    min-height:750px;
    gap:0
  }
  .hero {
    min-height:830px
  }
  .hero h1 {
    font-size:clamp(52px,4.6vw,56px)
  }
  .hero-scene {
    height:570px
  }
  .draft-card {
    min-width:230px;
    width:52%;
    top:25%
  }
  .product-art {
    width:52%;
    left:5%;
    top:12%
  }
  .hero-actions {
    gap:18px;
    flex-wrap:wrap
  }
  .draft-photo {
    height:112px
  }
  .draft-photo img {
    height:185px;
    top:-30px
  }
  .draft-body {
    padding:16px 16px 0
  }
  .draft-ready {
    margin:0 -16px;
    padding:13px 16px
  }
  .draft-title {
    font-size:18px
  }
  .origin-tag {
    top:78%;
    left:0;
    max-width:42%
  }
  .hero-bottom .example-label {
    display:none
  }
  .story-grid {
    gap:60px
  }
  .story-canvas {
    min-height:485px;
    padding:22px
  }
  .chapter {
    min-height:590px
  }
  .intro-grid {
    gap:45px
  }
  .final-grid {
    gap:50px
  }
}
@media(max-width:960px) {
  .hero-grid {
    min-height:700px
  }
  .hero {
    min-height:770px
  }
  .hero-scene {
    height:520px
  }
  .product-art {
    top:12%
  }
  .hero-scene .origin-tag {
    top:auto;
    bottom:0;
    left:0;
    width:100%;
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    gap:4px 16px;
    border-left:0;
    border-top:1px solid #c3d9b85c;
    padding:12px 0 10px
  }
  .hero-scene .product-caption {
    margin:0;
    padding:0;
    border:0
  }
  .hero h1 {
    font-size:52px
  }
  .hero-intro {
    font-size:16px
  }
  .hero .eyebrow {
    font-size:14px;
    margin-bottom:25px
  }
  .hero-actions {
    margin-top:28px;
    gap:18px
  }
  .hero .btn-lg {
    padding:15px 20px;
    min-height:53px;
    font-size:16px;
    gap:14px
  }
  .watch-link {
    font-size:14px
  }
  .draft-card {
    min-width:210px;
    width:62%;
    right:0;
    top:20%
  }
  .draft-top {
    padding:13px 15px
  }
  .draft-title {
    font-size:16px
  }
  .draft-properties {
    gap:14px
  }
  .origin-tag {
    top:78%;
    left:0;
    max-width:42%;
    font-size:14px
  }
  .origin-tag b {
    font-size:15px
  }
  .origin-tag small {
    font-size:14px
  }
  .scene-annotation {
    font-size:14px;
    bottom:auto
  }
  .intro {
    padding-top:80px
  }
  .intro-grid {
    grid-template-columns:1.3fr 1fr;
    gap:40px
  }
  .intro h2 {
    font-size:38px
  }
  .intro-grid>p {
    font-size:16px
  }
  .story-grid {
    grid-template-columns:1.15fr 1fr;
    gap:40px
  }
  .story-canvas {
    min-height:445px;
    padding:15px
  }
  .story-screen {
    min-height:355px
  }
  .source-strip {
    margin:20px 18px 0;
    gap:12px
  }
  .source-strip>img {
    width:70px;
    height:85px
  }
  .source-strip h3 {
    font-size:14px
  }
  .source-strip p {
    font-size:12px
  }
  .generated-copy {
    padding:18px
  }
  .generated-copy p {
    font-size:16px
  }
  .prepared-row {
    padding:20px 18px
  }
  .prepared-row b {
    margin-left:4px;
    font-size:12px
  }
  .chapter {
    min-height:550px
  }
  .chapter h2 {
    font-size:38px
  }
  .chapter>p {
    font-size:16px
  }
  .care {
    padding-block:85px
  }
  .care-items {
    gap:35px;
    margin-top:65px
  }
  .care-top>p {
    margin-right:0;
    font-size:16px
  }
  .care-items h3 {
    font-size:20px
  }
  .pricing-grid,.faq-grid {
    gap:60px
  }
  .plan {
    padding:28px
  }
  .final h2 {
    font-size:42px
  }
  .confirm-heading {
    padding:24px 18px
  }
  .confirm-heading h3 {
    font-size:21px
  }
  .confirm-list {
    margin-inline:18px
  }
  .confirm-foot {
    padding:24px 18px
  }
}
@media(min-width:760px) and (max-width:960px) {
  .hero {
    min-height:auto
  }
  .hero-grid {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding-top:142px;
    padding-bottom:0;
    min-height:auto;
    gap:0
  }
  .hero-copy {
    padding-bottom:0
  }
  .hero-scene {
    height:680px;
    width:100%;
    max-width:560px;
    align-self:center;
    margin-top:12px
  }
  .hero-scene .draft-card {
    min-width:220px;
    width:62%;
    right:0;
    top:20%
  }
}
@media(max-width:760px) {
  .hero {
    min-height:auto
  }
  .hero-grid {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding-top:142px;
    padding-bottom:0;
    min-height:auto;
    gap:0
  }
  .hero-copy {
    padding-bottom:0
  }
  .hero .eyebrow {
    font-size:14px;
    margin-bottom:27px
  }
  .hero h1 {
    font-size:clamp(36px,8.8vw,40px);
    line-height:1.22;
    letter-spacing:-.012em
  }
  .hero-intro {
    font-size:16px;
    margin-top:24px;
    line-height:1.9
  }
  .hero-actions {
    margin-top:28px;
    gap:21px;
    flex-wrap:nowrap
  }
  .hero .btn-lg {
    font-size:16px;
    gap:14px;
    padding:15px 19px;
    min-height:52px
  }
  .watch-link {
    font-size:14px;
    gap:8px
  }
  .play-icon {
    width:28px;
    height:28px
  }
  .hero-note {
    font-size:14px;
    margin-top:16px
  }
  .hero-scene {
    height:680px;
    width:100%;
    max-width:560px;
    align-self:center;
    margin-top:12px
  }
  .scene-orbit {
    top:8%;
    width:94%;
    right:-3%
  }
  .product-art {
    width:50%;
    top:12%;
    left:7%
  }
  .draft-card {
    width:62%;
    min-width:190px;
    right:0;
    top:20%;
    border-radius:8px
  }
  .draft-top {
    padding:12px
  }
  .ozon-word {
    font-size:14px
  }
  .draft-state {
    font-size:12px;
    gap:4px
  }
  .draft-photo {
    height:112px
  }
  .draft-photo img {
    height:185px;
    top:-30px
  }
  .draft-body {
    padding:13px 13px 0
  }
  .draft-title {
    font-size:17px
  }
  .draft-category {
    font-size:12px;
    margin-bottom:6px
  }
  .draft-properties {
    font-size:14px;
    gap:14px;
    margin:14px 0
  }
  .draft-ready {
    margin:0 -13px;
    padding:11px 12px;
    gap:7px
  }
  .draft-ready b {
    font-size:14px
  }
  .draft-ready div>span {
    font-size:12px
  }
  .draft-ready>span:last-child {
    font-size:17px
  }
  .check-round {
    width:23px;
    height:23px;
    font-size:12px
  }
  .origin-tag {
    top:auto;
    bottom:0;
    left:0;
    width:100%;
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    gap:4px 16px;
    border-left:0;
    border-top:1px solid #c3d9b85c;
    padding:12px 0 10px;
    font-size:14px
  }
  .origin-tag b {
    font-size:15px
  }
  .origin-tag small {
    font-size:14px
  }
  .product-caption {
    margin:0;
    padding:0;
    border:0
  }
  .scene-annotation {
    top:3%;
    font-size:14px;
    right:0
  }
  .hero-bottom {
    padding-block:21px;
    flex-wrap:wrap;
    font-size:14px;
    gap:10px
  }
  .hero-bottom>a {
    gap:10px
  }
  .intro {
    padding-top:65px;
    padding-bottom:45px
  }
  .section-overline {
    font-size:14px;
    padding-bottom:17px;
    margin-bottom:37px
  }
  .intro-grid {
    display:block
  }
  .intro h2 {
    font-size:clamp(30px,7vw,34px);
    line-height:1.5
  }
  .intro-grid>p {
    font-size:16px;
    line-height:1.9;
    margin-top:25px
  }
  .story {
    padding-bottom:62px
  }
  .story-grid {
    display:block
  }
  .story-visual {
    position:static;
    top:auto;
    z-index:5;
    padding-top:0;
    background:var(--paper)
  }
  .story-tabs {
    gap:25px;
    margin-bottom:14px
  }
  .story-tabs button {
    font-size:14px;
    padding:12px 0;
    min-height:44px
  }
  .story-canvas {
    height:auto;
    min-height:410px;
    padding:16px 25px;
    border-radius:6px
  }
  .story-screen {
    max-width:380px;
    min-height:0
  }
  .mini-browser {
    padding:10px 14px;
    font-size:12px
  }
  .source-strip {
    margin:14px 18px 0;
    gap:14px
  }
  .source-strip>img {
    width:55px;
    height:62px
  }
  .source-strip h3 {
    font-size:14px;
    margin:3px 0
  }
  .source-strip p {
    font-size:12px
  }
  .tiny-label {
    font-size:12px
  }
  .translation-line {
    margin:14px 18px;
    font-size:12px
  }
  .generated-copy {
    padding:13px 18px
  }
  .generated-copy p {
    font-size:17px;
    margin-top:5px;
    line-height:1.35
  }
  .prepared-row {
    padding:14px 18px;
    font-size:12px
  }
  .prepared-row b {
    font-size:12px
  }
  .canvas-caption {
    margin-top:12px;
    padding-bottom:14px;
    border-bottom:1px solid #d0d7c3;
    font-size:12px;
    gap:10px
  }
  .question-art {
    height:77px
  }
  .question-art img {
    height:170px;
    margin-top:-40px
  }
  .question-body {
    padding:13px 20px
  }
  .question-body h3 {
    font-size:20px;
    margin:2px 0 5px
  }
  .question-body>p {
    font-size:14px
  }
  .size-options {
    margin-top:12px
  }
  .size-options button {
    padding:9px 13px;
    min-height:44px;
    width:90px
  }
  .question-body>.demo-selection {
    font-size:12px;
    margin-top:8px
  }
  .confirm-heading {
    padding:14px 20px;
    gap:13px
  }
  .confirm-heading h3 {
    font-size:20px;
    line-height:1.4
  }
  .confirm-check {
    width:32px;
    height:32px;
    font-size:13px
  }
  .confirm-list {
    margin-inline:20px
  }
  .confirm-list>div {
    padding:8px 0;
    font-size:14px
  }
  .confirm-foot {
    padding:13px 20px;
    font-size:12px
  }
  .chapter {
    min-height:435px;
    padding:48px 0;
    opacity:1;
    scroll-margin-top:2rem
  }
  .chapter h2 {
    font-size:34px;
    line-height:1.45
  }
  .chapter-number {
    margin-bottom:17px;
    font-size:14px
  }
  .chapter>p {
    font-size:16px;
    line-height:1.9;
    margin-top:20px;
    max-width:410px
  }
  .chapter-foot {
    font-size:14px;
    margin-top:23px;
    padding-top:15px;
    max-width:none
  }
  .care {
    padding:70px 0
  }
  .care .eyebrow {
    font-size:14px
  }
  .care-top {
    display:block;
    margin-top:23px
  }
  .care h2 {
    font-size:34px
  }
  .care-top>p {
    font-size:16px;
    margin-top:25px;
    padding-bottom:0
  }
  .care-items {
    display:block;
    margin-top:42px
  }
  .care-items article {
    padding-top:21px;
    display:grid;
    grid-template-columns:35px 1fr;
    gap:0 15px;
    margin-top:27px
  }
  .care-icon {
    padding-top:5px;
    font-size:14px
  }
  .care-items h3 {
    font-size:20px;
    margin:0
  }
  .care-items p {
    grid-column:2;
    font-size:16px;
    margin-top:10px;
    max-width:390px
  }
  .pricing {
    padding:70px 0
  }
  .pricing-grid {
    display:block
  }
  .pricing h2,.faq h2 {
    font-size:34px
  }
  .pricing .eyebrow,.faq .eyebrow {
    margin-bottom:23px;
    font-size:14px
  }
  .section-copy {
    font-size:16px;
    margin-top:20px
  }
  .pricing .text-link {
    margin-top:20px
  }
  .plan {
    margin:40px 0 0;
    max-width:none;
    padding:28px
  }
  .price {
    font-size:56px
  }
  .plan ul {
    font-size:16px
  }
  .faq {
    padding-bottom:70px
  }
  .faq-grid {
    display:block;
    padding-top:46px
  }
  .faq-list {
    margin-top:25px
  }
  .faq-list summary {
    font-size:16px;
    padding-block:22px
  }
  .ans p {
    font-size:16px;
    padding-bottom:22px
  }
  .final {
    padding-block:70px
  }
  .final-grid {
    display:block
  }
  .final h2 {
    font-size:clamp(30px,8vw,34px)
  }
  .final .eyebrow {
    margin-bottom:23px;
    font-size:14px
  }
  .start-form-wrap {
    margin-top:37px
  }
  .start-form-wrap>p {
    font-size:16px;
    margin-bottom:18px
  }
  .field {
    min-height:57px
  }
  .field input {
    font-size:16px
  }
  .start-meta {
    font-size:14px
  }
}
@media(max-width:400px) {
  .hero-grid {
    padding-top:130px
  }
  .hero h1 {
    font-size:36px
  }
  .hero-intro {
    font-size:16px
  }
  .hero-actions {
    gap:12px;
    flex-wrap:wrap
  }
  .hero .btn-lg {
    padding-inline:16px;
    gap:10px
  }
  .watch-link {
    font-size:14px;
    gap:6px
  }
  .hero-scene {
    height:620px
  }
  .draft-card {
    top:20%;
    width:72%;
    min-width:190px;
    right:0
  }
  .draft-photo {
    height:95px
  }
  .draft-photo img {
    height:167px;
    top:-28px
  }
  .draft-title {
    font-size:14px
  }
  .draft-top {
    padding:10px
  }
  .draft-body {
    padding:12px 11px 0
  }
  .draft-ready {
    margin:0 -11px;
    padding:10px
  }
  .draft-category {
    font-size:12px
  }
  .draft-properties {
    font-size:14px;
    gap:8px;
    margin:12px 0
  }
  .draft-properties b {
    margin-left:4px
  }
  .origin-tag {
    top:auto;
    bottom:0;
    width:100%;
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:4px 12px;
    padding:12px 0 10px;
    left:0
  }
  .scene-annotation {
    top:3%;
    font-size:14px
  }
  .story-canvas {
    padding:13px;
    height:auto
  }
  .generated-copy p {
    font-size:16px
  }
  .hero-bottom {
    font-size:14px
  }
  .hero-bottom>a {
    gap:6px
  }
  .chapter {
    scroll-margin-top:2rem
  }
  .intro h2 {
    font-size:34px
  }
}
@media(prefers-reduced-motion:reduce) {
  .hero-scene svg circle {
    display:none
  }
  .product-art {
    transform:rotate(-9deg)
  }
  .draft-card {
    transform:rotate(5deg)
  }
  .chapter {
    opacity:1
  }
  .content-cursor {
    display:none
  }
  .line-track i {
    width:100%
  }
}