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

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./assets/onest-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: "Onest";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./assets/onest-symbols.woff2") format("woff2");
  unicode-range: U+20BD, U+2192;
}

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

@font-face {
  font-family: "Pangolin";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/pangolin-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 {
  color-scheme: light;
  --font-heading: "Pangolin", cursive;
  --font-body: "Onest", sans-serif;
  --weight-body: 400;
  --weight-emphasis: 600;
  --weight-button: 700;
  --weight-h1: 400;
  --weight-h2: 400;
  --weight-h3: 400;
  --line-body: 1.5;
  --line-heading: 1.02;
  --letter-heading: -0.02em;
  --hero-background: #f7f8fa;
  --hero-heading: #203d65;
  --hero-text: #344e70;
  --hero-blue: #2463df;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--hero-background);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  line-height: var(--line-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-style: normal;
  line-height: var(--line-heading);
  letter-spacing: var(--letter-heading);
  font-synthesis: none;
}
h1 { font-weight: var(--weight-h1); }
h2 { font-weight: var(--weight-h2); }
h3, h4 { font-weight: var(--weight-h3); }
.drawing-story__conclusion,
.drawings-alive__steps,
.how-it-works__highlight,
.free-trial__offer {
  font-weight: var(--weight-h2);
  letter-spacing: var(--letter-heading);
  font-synthesis: none;
}
strong, b { font-weight: var(--weight-emphasis); }
button, input, select, textarea { font: inherit; }

/* Header navigation uses Onest and keeps the supplied logo intact. */
:where([id]) { scroll-margin-top: 24px; }
.site-header {
  max-width: 1920px;
  margin-inline: auto;
  background: var(--hero-background);
  color: var(--hero-heading);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
}
.site-header__brand { flex: 0 0 auto; display: block; border-radius: 8px; }
.site-header__logo {
  display: block;
  width: 104px;
  height: 48px;
  object-fit: cover;
  object-position: 50% 54%;
}
.site-header__nav {
  order: 4;
  flex: 1 0 100%;
  display: grid;
  gap: 4px;
  padding-block: 12px 4px;
}
.site-header__nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  color: inherit;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}
.site-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  max-width: 176px;
  min-height: 46px;
  margin-left: auto;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--hero-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  text-decoration: none;
}
.site-header__toggle {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--hero-heading);
  cursor: pointer;
}
.site-header__toggle svg { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.site-header__close-icon { display: none; }
.site-header__toggle[aria-expanded="true"] .site-header__close-icon { display: block; }
.site-header__toggle[aria-expanded="true"] .site-header__menu-icon { display: none; }
.site-header [hidden] { display: none; }
.site-header :is(a, button):focus-visible { outline: 3px solid var(--hero-blue); outline-offset: 4px; }
@media (hover: hover) {
  .site-header__nav a:hover, .site-header__toggle:hover { background: #e8f7ff; }
  .site-header__cta:hover { background: #1c53c1; }
}
@media (max-width: 359px) {
  .site-header__inner { gap: 6px; padding-inline: 16px; }
  .site-header__logo { width: 88px; height: 42px; }
}
@media (min-width: 600px) {
  .site-header__inner { gap: 24px; padding: 10px 32px; }
  .site-header__logo { width: 206px; height: 90px; }
  .site-header__cta { flex: 0 0 auto; max-width: none; padding: 14px 24px; font-size: 16px; line-height: 1.4; }
}
@media (max-width: 1199px) {
  .site-header__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) 44px; }
  .site-header__nav { grid-column: 1 / -1; }
  .site-header__cta { min-width: 0; justify-self: end; }
  .site-header__toggle { grid-column: 3; grid-row: 1; }
}
@media (min-width: 600px) and (max-width: 1199px) {
  .site-header__logo { width: clamp(104px, 20vw, 206px); height: clamp(48px, 9vw, 90px); }
}
@media (min-width: 1200px) {
  .site-header__inner { flex-wrap: nowrap; gap: 32px; padding-inline: clamp(48px, 5vw, 96px); }
  .site-header__nav { order: 0; flex: 0 1 auto; display: flex; gap: clamp(12px, 1.6vw, 28px); margin-inline: auto 0; padding: 0; }
  .site-header__nav a { padding-inline: 0; }
  .site-header__cta { margin-left: 0; }
}

.hero {
  position: relative;
  isolation: isolate;
  max-width: 1920px;
  margin-inline: auto;
  overflow: clip;
  background: var(--hero-background);
  color: var(--hero-text);
  -webkit-font-smoothing: antialiased;
}

.hero::before {
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: clamp(48px, 7vw, 112px);
  content: "";
  background: linear-gradient(to bottom, var(--hero-background), transparent);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin-inline: auto;
  padding: 44px 24px 0;
}

.hero h1, .hero h2, .hero p { margin: 0; }

.hero h1 {
  max-width: 560px;
  color: var(--hero-heading);
  font-size: clamp(20px, calc(7vw - 3px), 40px);
  font-weight: var(--weight-h1);
  line-height: var(--line-heading);
  letter-spacing: var(--letter-heading);
  text-wrap: balance;
}

.hero h1 span { display: block; }

.hero h2 {
  margin-top: 20px;
  color: var(--hero-blue);
  font-size: clamp(26px, 6.5vw, 36px);
  font-weight: var(--weight-h2);
  line-height: var(--line-heading);
  letter-spacing: var(--letter-heading);
  text-wrap: balance;
}

.hero__description {
  max-width: 460px;
  margin-top: 24px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
}

.hero__description p + p { margin-top: 14px; }

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  width: 100%;
  margin-top: 28px;
  padding: 17px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--hero-blue);
  color: #fff;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--weight-button);
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition: background-color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .hero__cta:hover { background: #1c53c1; }
}
.hero__cta:active { background: #1748ac; }
.hero__cta:focus-visible {
  outline: 3px solid var(--hero-heading);
  outline-offset: 5px;
}

.hero__picture {
  position: relative;
  z-index: 0;
  display: block;
  max-width: 600px;
  margin: max(-76vw, -456px) auto 0;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, #000 42%, #000 92%, transparent);
}

.hero__image { display: block; width: 100%; height: auto; }

@media (min-width: 600px) and (max-width: 1023px) {
  .hero__content { padding-top: 64px; }
  .hero h1 { font-size: 39px; }
  .hero__cta { width: auto; padding-inline: 32px; }
}

@media (max-width: 359px) {
  .hero__content { padding-inline: 20px; }
}

@media (min-width: 1024px) {
  .hero {
    display: grid;
    align-items: center;
    min-height: max(720px, min(56.28vw, 1080px));
  }

  .hero__content {
    width: 52%;
    max-width: none;
    margin: 0;
    padding: 80px 0 104px clamp(48px, 5vw, 96px);
  }

  .hero h1 {
    max-width: none;
    font-size: clamp(32px, 3.3vw, 64px);
  }
  .hero h2 {
    max-width: 550px;
    margin-top: 24px;
    font-size: clamp(30px, 2.65vw, 44px);
  }

  .hero__description {
    margin-top: 28px;
    font-size: clamp(18px, 1.4vw, 22px);
  }

  .hero__cta {
    width: auto;
    min-height: 66px;
    margin-top: 32px;
    padding-inline: 36px;
    font-size: 20px;
  }

  .hero__picture {
    position: absolute;
    inset: 0 0 0 calc(9% + 40px);
    max-width: none;
    margin: 0;
    overflow: hidden;
    mask-image: none;
  }

  .hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 44%;
  }

  .hero::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, rgb(247 248 250 / 94%), rgb(247 248 250 / 75%) 32%, transparent 56%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cta { transition: none; }
}

.drawing-story {
  max-width: 1920px;
  margin-inline: auto;
  background: #fffefd;
  color: var(--hero-text);
  -webkit-font-smoothing: antialiased;
}

.drawing-story__chapter {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.drawing-story__art {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: url("./assets/story-desktop.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  pointer-events: none;
}

.drawing-story__chapter--storage {
  min-height: 660px;
  padding: 76px 7% 66px;
}

.drawing-story__chapter--storage .drawing-story__art {
  background-position: center top;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 66%, transparent 100%);
}

.drawing-story__chapter--storage::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgb(255 254 253 / 94%), rgb(255 254 253 / 93%) 36%, transparent 53%);
  pointer-events: none;
}

.drawing-story__copy { position: relative; width: 47%; max-width: 650px; }

.drawing-story h2 {
  margin: 0 0 24px;
  color: var(--hero-heading);
  font-size: clamp(36px, 3.2vw, 54px);
  font-weight: var(--weight-h2);
  line-height: var(--line-heading);
  letter-spacing: var(--letter-heading);
  text-wrap: balance;
}

.drawing-story p, .drawing-story__list {
  margin: 0;
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.48;
}

.drawing-story__list { padding-left: 1.25em; }
.drawing-story__list li { padding-left: 0.18em; }
.drawing-story__list li + li { margin-top: 8px; }
.drawing-story__list li::marker { color: var(--hero-blue); }

.drawing-story h3 {
  margin: 30px 0 16px;
  color: var(--hero-heading);
  font-size: clamp(26px, 2.1vw, 34px);
  font-weight: var(--weight-h3);
  line-height: var(--line-heading);
  letter-spacing: var(--letter-heading);
}

.drawing-story__highlight {
  padding: 0.1em 0.24em;
  margin-inline: -0.24em;
  background: linear-gradient(177deg, transparent 4%, #e8f7ff 17%, #d8f0fc 77%, transparent 97%);
  border-radius: 0.7em 0.9em 0.65em 0.8em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.drawing-story p + p { margin-top: 14px; }
.drawing-story__emphasis { color: var(--hero-heading); font-weight: var(--weight-emphasis); }

.drawing-story__chapter--album {
  min-height: clamp(700px, 53vw, 1020px);
  padding: 82px 7% clamp(190px, 17vw, 326px);
}

.drawing-story__chapter--album .drawing-story__art {
  background-position: center bottom;
  mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 82%, transparent);
}

.drawing-story__chapter--album .drawing-story__copy {
  width: calc(46% - 40px);
  margin-left: auto;
}

.drawing-story__chapter--album .drawing-story__copy::before {
  position: absolute;
  z-index: -1;
  inset: -32px -36px;
  content: "";
  background: radial-gradient(ellipse, rgb(255 254 253 / 97%) 32%, rgb(255 254 253 / 85%) 56%, transparent 74%);
  pointer-events: none;
}

.drawing-story .drawing-story__conclusion {
  margin-top: 28px;
  color: var(--hero-heading);
  font-size: clamp(23px, 1.95vw, 32px);
  font-weight: var(--weight-h2);
  line-height: var(--line-heading);
  font-family: var(--font-heading);
}

@media (min-width: 1024px) {
  .drawing-story__chapter--storage {
    min-height: 0;
    padding: 60px 5% 28px;
  }
  .drawing-story__chapter--storage .drawing-story__copy { width: 50%; }
  .drawing-story__chapter--storage::after {
    background: linear-gradient(90deg, rgb(255 254 253 / 96%) 40%, rgb(255 254 253 / 94%) 48%, transparent 59%);
  }
  .drawing-story__chapter--album {
    /* Fit the complete dragon and landscape at the image's original ratio. */
    min-height: min(44vw, 844.8px);
    padding: 28px 5% clamp(100px, 10vw, 180px);
  }
  .drawing-story__chapter--album .drawing-story__copy {
    width: 48%;
    max-width: 720px;
  }
  .drawing-story__chapter--album .drawing-story__copy::before {
    inset: -16px -20px;
    background: rgb(255 254 253 / 96%);
    filter: blur(20px);
  }
}

@media (max-width: 1023px) {
  .drawing-story__art { background-image: url("./assets/story-mobile.png"); }
  .drawing-story__chapter--storage { padding: calc(43vw + 28px) 32px 58px; }
  .drawing-story__chapter--storage .drawing-story__art {
    height: 55vw;
    mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 75%, transparent);
  }
  .drawing-story__chapter--storage::after { display: none; }
  .drawing-story__copy,
  .drawing-story__chapter--album .drawing-story__copy { width: 100%; max-width: 650px; margin-inline: auto; }
  .drawing-story h2 { font-size: clamp(32px, 4.7vw, 44px); }
  .drawing-story p, .drawing-story__list { font-size: 19px; }
  .drawing-story__chapter--album { min-height: 0; padding: 24px 32px calc(76vw + 40px); }
  .drawing-story__chapter--album .drawing-story__art {
    top: auto;
    height: 78vw;
    mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 82%, transparent);
  }
  .drawing-story__chapter--album .drawing-story__copy::before { display: none; }
}

@media (max-width: 599px) {
  .drawing-story__chapter--storage { padding: calc(43vw + 28px) 24px 48px; }
  .drawing-story h2 { margin-bottom: 22px; }
  .drawing-story p, .drawing-story__list { font-size: 18px; }
  .drawing-story h3 { margin-top: 26px; font-size: 26px; }
  .drawing-story__list li + li { margin-top: 10px; }
  .drawing-story__chapter--album { padding: 20px 24px calc(76vw + 32px); }
  .drawing-story .drawing-story__conclusion { font-size: 24px; }
}

.drawings-alive {
  position: relative;
  isolation: isolate;
  max-width: 1920px;
  margin-inline: auto;
  overflow: clip;
  background: #fffefd;
  color: var(--hero-text);
  -webkit-font-smoothing: antialiased;
}

/* Keep the original watercolour border while giving the copy room to grow. */
.drawings-alive::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 30vw;
  max-height: 180px;
  content: "";
  background: url("./assets/alive-mobile.png") center top / 100% auto no-repeat;
  mask-image: linear-gradient(transparent, #000 14%, #000 80%, transparent);
  pointer-events: none;
}

.drawings-alive__copy {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin-inline: auto;
  padding: clamp(116px, 27vw, 190px) 24px 0;
}

.drawings-alive h2 {
  margin: 0 0 24px;
  color: var(--hero-heading);
  font-size: clamp(32px, 7.5vw, 44px);
  font-weight: var(--weight-h2);
  line-height: var(--line-heading);
  letter-spacing: var(--letter-heading);
}

.drawings-alive p {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
}

.drawings-alive p + p { margin-top: 20px; }
.drawings-alive strong { font-weight: var(--weight-emphasis); }
.drawings-alive .drawings-alive__steps {
  margin-block: 24px 20px;
  color: var(--hero-blue);
  font-size: 21px;
  font-family: var(--font-heading);
  line-height: var(--line-heading);
  letter-spacing: var(--letter-heading);
}
.drawings-alive .drawings-alive__steps strong { font-weight: var(--weight-h2); }
.drawings-alive__memory strong { color: var(--hero-heading); }
.drawings-alive .drawings-alive__closing { margin-top: 18px; }

.drawings-alive__picture {
  display: block;
  margin-top: 24px;
  overflow: hidden;
  /* Only trim the empty area; preserve the character and the entire tablet. */
  mask-image: linear-gradient(transparent, #000 32px);
}

.drawings-alive__picture img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -43vw;
}

@media (min-width: 600px) and (max-width: 1199px) {
  .drawings-alive__copy { padding-inline: 32px; }
  .drawings-alive h2 { max-width: 420px; }
  .drawings-alive p { font-size: 20px; }
  .drawings-alive .drawings-alive__steps { font-size: 25px; }
  .drawings-alive__picture { max-width: 768px; margin-inline: auto; }
  .drawings-alive__picture img { margin-top: max(-43vw, -330.24px); }
}

@media (min-width: 1200px) {
  .drawings-alive { display: grid; grid-template-columns: 46% 54%; align-items: center; }
  .drawings-alive::before { display: none; }
  .drawings-alive__copy {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 140px 24px 80px clamp(48px, 5vw, 96px);
  }
  .drawings-alive h2 { font-size: clamp(34px, 3.2vw, 54px); }
  .drawings-alive p { font-size: clamp(18px, 1.45vw, 23px); }
  .drawings-alive .drawings-alive__steps { font-size: clamp(20px, 1.85vw, 30px); }
  .drawings-alive__picture {
    position: relative;
    margin: 0;
    mask-image: linear-gradient(90deg, transparent, #000 10%), linear-gradient(transparent, #000 5%, #000 95%, transparent);
    mask-composite: intersect;
  }
  .drawings-alive__picture img { width: 154%; height: auto; margin: 0 0 0 -54%; }
}

.fairytale {
  position: relative;
  isolation: isolate;
  max-width: 1920px;
  margin-inline: auto;
  overflow: clip;
  background: #fffcf6;
  color: var(--hero-text);
  -webkit-font-smoothing: antialiased;
}

.fairytale__divider {
  position: absolute;
  z-index: 2;
  inset: -1px 0 auto;
  width: 100%;
  height: 38px;
  pointer-events: none;
}
.fairytale__divider-fill { fill: #fffefd; }
.fairytale__divider-line {
  fill: none;
  stroke: #a5d8f4;
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.fairytale__picture {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  display: block;
  max-width: 768px;
  height: min(110vw, 845px);
  margin-inline: auto;
  overflow: hidden;
  mask-image: linear-gradient(#000 83%, transparent);
}
.fairytale__picture img { display: block; width: 100%; height: auto; }

/* Extend the quiet paper area so the text can grow independently of the art. */
.fairytale::after {
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: clamp(140px, 34vw, 260px);
  content: "";
  background: url("./assets/fairytale-mobile.png") center bottom / 100% auto no-repeat;
  mask-image: linear-gradient(transparent, #000 38%);
  pointer-events: none;
}

.fairytale__copy {
  max-width: 600px;
  margin-inline: auto;
  padding: calc(min(110vw, 845px) + 12px) 24px clamp(160px, 36vw, 280px);
}
.fairytale h2 {
  margin: 0 0 24px;
  color: var(--hero-heading);
  font-size: clamp(32px, 7.5vw, 44px);
  font-weight: var(--weight-h2);
  line-height: var(--line-heading);
  letter-spacing: var(--letter-heading);
  text-wrap: balance;
}
.fairytale p { margin: 0; font-size: 18px; line-height: 1.5; }
.fairytale p + p { margin-top: 20px; }
.fairytale h3 {
  margin: 28px 0 0;
  color: var(--hero-heading);
  font-size: 24px;
  font-weight: var(--weight-h3);
  line-height: var(--line-heading);
  letter-spacing: var(--letter-heading);
  text-wrap: balance;
}
.fairytale h3 span { color: var(--hero-blue); }

@media (min-width: 600px) and (max-width: 1199px) {
  .fairytale__copy { padding-inline: 32px; }
  .fairytale p { font-size: 20px; }
  .fairytale h3 { font-size: 28px; }
}

@media (min-width: 1200px) {
  .fairytale { min-height: min(56.28vw, 1081px); }
  .fairytale__divider { height: 54px; }
  .fairytale__picture {
    inset: 0;
    max-width: none;
    height: 100%;
    mask-image: none;
  }
  .fairytale__picture img { height: 100%; object-fit: cover; }
  .fairytale::after { display: none; }
  .fairytale__copy {
    width: 51%;
    max-width: none;
    margin-left: 42%;
    padding: clamp(110px, 10vw, 192px) 0 clamp(160px, 12vw, 230px);
  }
  .fairytale h2 { max-width: 680px; font-size: clamp(38px, 3.2vw, 54px); }
  .fairytale p { max-width: 640px; font-size: clamp(18px, 1.45vw, 23px); }
  .fairytale h3 { max-width: 680px; margin-top: 32px; font-size: clamp(26px, 2.1vw, 34px); text-wrap: initial; }
}

.how-it-works {
  position: relative;
  isolation: isolate;
  max-width: 1920px;
  margin-inline: auto;
  overflow: clip;
  background: #fffefd;
  color: var(--hero-text);
  -webkit-font-smoothing: antialiased;
}
.how-it-works::before,
.how-it-works::after {
  position: absolute;
  z-index: -1;
  inset-inline: 0;
  content: "";
  pointer-events: none;
  background-image: url("./assets/how-it-works-mobile.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.how-it-works::before {
  top: 0;
  height: min(24vw, 145px);
  background-position: center top;
  mask-image: linear-gradient(transparent, #000 32px, #000 80%, transparent);
}
.how-it-works::after {
  bottom: 0;
  height: clamp(38px, 12vw, 72px);
  background-position: center bottom;
  mask-image: linear-gradient(transparent, #000 40%);
}
.how-it-works__divider {
  position: absolute;
  z-index: 1;
  inset: auto 0 -1px;
  width: 100%;
  height: 38px;
  pointer-events: none;
}
.how-it-works__divider-fill { fill: #fffefd; }
.how-it-works__divider-line {
  fill: none;
  stroke: #a5d8f4;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.how-it-works h2 {
  margin: 0;
  padding: clamp(112px, 25vw, 170px) 24px 0;
  color: var(--hero-heading);
  font-size: clamp(32px, 7.5vw, 44px);
  font-weight: var(--weight-h2);
  line-height: var(--line-heading);
  letter-spacing: var(--letter-heading);
  text-align: center;
  text-wrap: balance;
}
.how-it-works__steps { max-width: 600px; margin: 36px auto 0; padding: 0; list-style: none; }
.how-it-works__step + .how-it-works__step { margin-top: 32px; }
.how-it-works__step-copy { display: flex; align-items: flex-start; gap: 14px; padding-inline: 24px; }
.how-it-works__number {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  height: 44px;
  border-radius: 48% 52% 49% 51%;
  background: var(--hero-blue);
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}
.how-it-works h3 { margin: 0; color: var(--hero-heading); font-size: 24px; font-weight: var(--weight-h3); line-height: var(--line-heading); letter-spacing: var(--letter-heading); }
.how-it-works p { margin: 0; font-size: 18px; line-height: 1.5; }
.how-it-works .how-it-works__intro { max-width: 760px; margin: 24px auto 0; padding-inline: 24px; text-align: center; }
.how-it-works__scene { display: none; }
.how-it-works .how-it-works__tagline { max-width: 300px; margin: 14px auto 0; padding-inline: 24px; color: var(--hero-blue); font-size: 17px; text-align: center; }
.how-it-works .how-it-works__aside { margin: 12px 24px 0; color: var(--hero-blue); font-size: 17px; text-align: center; }
.how-it-works__step-copy p { margin-top: 10px; }
.how-it-works__art { margin-top: 20px; overflow: hidden; mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.how-it-works__art img { display: block; width: 100%; height: auto; }
/* Show each part of the supplied illustration beside its corresponding step. */
.how-it-works__art--photo { aspect-ratio: 941 / 420; }
.how-it-works__art--photo img { margin-top: -23.3794%; }
.how-it-works__art--send { aspect-ratio: 941 / 440; }
.how-it-works__art--send img { margin-top: -68.0128%; }
.how-it-works__art--album { aspect-ratio: 941 / 490; mask-image: linear-gradient(transparent, #000 3%, #000 92%, transparent); }
.how-it-works__art--album img { margin-top: -114.7715%; }
.how-it-works__summary { max-width: 600px; margin: 32px auto 0; padding: 0 24px 128px; text-align: center; }
.how-it-works .how-it-works__highlight {
  margin-top: 28px;
  padding: 20px 16px;
  border-radius: 48% 6% 43% 5% / 8% 48% 10% 46%;
  background: repeating-linear-gradient(-12deg, transparent 0 5px, #fffbe770 5px 7px), linear-gradient(176deg, #fff8d6, #fff1b3 55%, #fff8d6);
  color: var(--hero-heading);
  font-size: 23px;
  font-family: var(--font-heading);
  line-height: var(--line-heading);
  letter-spacing: var(--letter-heading);
}
.how-it-works__highlight strong { font-weight: var(--weight-h2); }

@media (min-width: 1200px) {
  .how-it-works {
    background: #fffefd;
  }
  .how-it-works__art { display: none; }
  .how-it-works::before { height: 180px; background-image: url("./assets/how-it-works-desktop.png"); }
  .how-it-works::after { height: min(20vw, 300px); background-image: url("./assets/how-it-works-desktop.png"); }
  .how-it-works__divider { height: 54px; }
  .how-it-works h2 { padding-top: clamp(88px, 7vw, 134px); font-size: clamp(44px, 4vw, 66px); }
  .how-it-works .how-it-works__tagline { position: absolute; top: min(6vw, 115px); right: 3%; width: 170px; margin: 0; padding: 0; font-size: 20px; line-height: 1.25; transform: rotate(-9deg); }
  .how-it-works .how-it-works__aside { position: absolute; top: min(44vw, 845px); left: 46%; width: 140px; margin: 0; font-size: clamp(18px, 1.4vw, 23px); line-height: 1.2; transform: rotate(-9deg); }
  .how-it-works__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    max-width: none;
    margin: 40px 4% 0;
    padding-bottom: 0;
  }
  .how-it-works__scene { display: block; aspect-ratio: 1448 / 430; margin-top: 32px; overflow: hidden; mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent); }
  .how-it-works__scene img { display: block; width: 100%; height: auto; margin-top: -22.7901%; }
  .how-it-works__step + .how-it-works__step { margin: 0; }
  .how-it-works__step-copy { padding: 0; }
  .how-it-works h3 { font-size: clamp(22px, 1.8vw, 30px); }
  .how-it-works__step-copy p { max-width: 300px; font-size: clamp(18px, 1.45vw, 23px); }
  .how-it-works__summary { max-width: 64%; margin-top: 32px; padding-bottom: 180px; }
  .how-it-works__summary > p { font-size: clamp(20px, 1.7vw, 27px); }
  .how-it-works .how-it-works__highlight { margin-top: 24px; font-size: clamp(24px, 2vw, 32px); }
}

/* Shared heading scale and alignment across all landing sections. */
:root {
  --section-heading-size: clamp(32px, 4.7vw, 44px);
  --subheading-size: 24px;
}
main h1, main h2, main h3 {
  text-align: left;
  text-transform: none;
}
.drawing-story h2,
.drawings-alive h2,
.fairytale h2,
.how-it-works h2,
.free-trial h2 {
  font-size: var(--section-heading-size);
  font-weight: var(--weight-h2);
  line-height: var(--line-heading);
  letter-spacing: var(--letter-heading);
  text-align: left;
  text-wrap: balance;
}
.drawing-story h3,
.drawings-alive h3,
.fairytale h3,
.how-it-works h3 {
  font-size: var(--subheading-size);
  font-weight: var(--weight-h3);
  line-height: var(--line-heading);
  letter-spacing: var(--letter-heading);
}
.how-it-works h2 { max-width: 600px; margin-inline: auto; }
.how-it-works .how-it-works__intro { max-width: 600px; text-align: left; }
.hero__voice-accent { color: var(--hero-blue); font-weight: var(--weight-emphasis); }
.drawings-alive__voice {
  margin-top: 32px;
  padding: 26px 22px 28px;
  background: linear-gradient(175deg, transparent 1%, #e8f7ff 5%, #dff2fc 88%, transparent 99%);
  border-radius: 32px 18px 38px 16px;
}
.drawings-alive__voice h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--hero-blue);
}
.drawings-alive__voice-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 36px;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.drawings-alive__voice strong { color: var(--hero-heading); }
@media (min-width: 1024px) {
  :root { --section-heading-size: clamp(36px, 3.2vw, 54px); --subheading-size: clamp(26px, 2.1vw, 34px); }
}
@media (min-width: 1200px) {
  .how-it-works h2 { max-width: none; margin-inline: 4%; padding-inline: 0; }
  .how-it-works .how-it-works__intro { max-width: 760px; margin-left: 4%; padding-inline: 0; }
  .how-it-works::before { transform: scaleX(-1); }
}

.free-trial {
  position: relative;
  isolation: isolate;
  max-width: 1920px;
  margin-inline: auto;
  overflow: clip;
  background: #fffdf8;
  color: var(--hero-text);
  -webkit-font-smoothing: antialiased;
}
.free-trial::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: min(26vw, 150px);
  content: "";
  background: url("./assets/free-trial-mobile.png") center top / 100% auto no-repeat;
  mask-image: linear-gradient(transparent, #000 24px, #000 78%, transparent);
  pointer-events: none;
}
.free-trial::after {
  position: absolute;
  z-index: 0;
  inset: auto 0 0;
  height: clamp(56px, 7vw, 120px);
  content: "";
  background: linear-gradient(transparent, #f4fbff);
  pointer-events: none;
}
.free-trial__divider {
  position: absolute;
  z-index: 2;
  inset: auto 0 -1px;
  width: 100%;
  height: 38px;
  pointer-events: none;
}
.free-trial__divider-fill { fill: #fffdf8; }
.free-trial__divider-line { fill: none; stroke: #a5d8f4; stroke-width: 2; vector-effect: non-scaling-stroke; }
.free-trial__copy {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin-inline: auto;
  padding: clamp(116px, 26vw, 170px) 24px 0;
}
.free-trial h2 { margin: 0 0 22px; color: var(--hero-heading); }
.free-trial p { margin: 0; font-size: 18px; line-height: 1.5; }
.free-trial .free-trial__offer { margin-bottom: 16px; color: var(--hero-blue); font-family: var(--font-heading); font-size: 21px; font-weight: var(--weight-h2); line-height: var(--line-heading); }
.free-trial__cta { max-width: 100%; }
.free-trial__picture {
  display: block;
  max-width: 768px;
  margin: 24px auto 0;
  overflow: hidden;
  mask-image: linear-gradient(transparent, #000 48px);
}
.free-trial__picture img { display: block; width: 100%; height: auto; margin-top: -78%; }

@media (min-width: 600px) and (max-width: 1199px) {
  .free-trial__copy { padding-inline: 32px; }
  .free-trial p { font-size: 20px; }
  .free-trial .free-trial__offer { font-size: 24px; }
}
@media (min-width: 1200px) {
  .free-trial { min-height: max(720px, min(56.28vw, 1080px)); }
  .free-trial::before { display: none; }
  .free-trial__divider { height: 54px; }
  .free-trial__copy { width: 49%; max-width: none; margin: 0; padding: clamp(72px, 6vw, 112px) 0 clamp(200px, 17vw, 326px) 7%; }
  .free-trial p { max-width: 520px; font-size: clamp(18px, 1.45vw, 23px); }
  .free-trial .free-trial__offer { font-size: clamp(22px, 1.8vw, 30px); }
  .free-trial__cta { padding-inline: 28px; }
  .free-trial__picture { position: absolute; z-index: -1; inset: 0; max-width: none; margin: 0; mask-image: linear-gradient(transparent, #000 32px); }
  .free-trial__picture img { width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: right bottom; }
}

/* Pricing uses the supplied portrait/landscape artwork with live, readable text. */
.pricing {
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  max-width: 1920px;
  margin-inline: auto;
  padding: calc(52vw + 24px) 24px max(160px, 62vw);
  background: #f4fbff;
  color: var(--hero-text);
  -webkit-font-smoothing: antialiased;
}
.pricing::before,
.pricing::after {
  position: absolute;
  z-index: -1;
  inset-inline: 0;
  content: "";
  background: url("./assets/pricing-mobile.png") center top / 100% auto no-repeat;
  pointer-events: none;
}
.pricing::before { top: 0; height: 58vw; mask-image: linear-gradient(transparent, #000 24px, #000 82%, transparent); }
.pricing::after {
  bottom: 0;
  height: 72vw;
  background-image: linear-gradient(to top, #faf8f4 3px, transparent clamp(56px, 7vw, 120px)), url("./assets/pricing-mobile.png");
  background-position: center bottom;
  background-size: 100% 100%, 100% auto;
  mask-image: linear-gradient(transparent, #000 24%);
}
.pricing__divider {
  position: absolute;
  z-index: 1;
  inset: -17px 0 auto;
  width: 100%;
  height: 38px;
  fill: none;
  stroke: #a5d8f4;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.pricing__divider path { vector-effect: non-scaling-stroke; }
.pricing__intro { max-width: 600px; margin-inline: auto; }
.pricing h2 {
  margin: 0 0 20px;
  color: var(--hero-heading);
  font-size: var(--section-heading-size);
  font-weight: var(--weight-h2);
  line-height: var(--line-heading);
  letter-spacing: var(--letter-heading);
}
.pricing__intro p { margin: 0; font-size: 18px; line-height: 1.5; }
.pricing__plans {
  display: grid;
  gap: 20px;
  max-width: 552px;
  margin: 32px auto 0;
}
.pricing__plan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  padding: 28px 24px;
  border: 1px solid #dceefa;
  border-radius: 30px;
  background: #ffffffed;
  box-shadow: 0 6px 24px #619cd114;
  text-align: center;
}
.pricing__decoration {
  position: absolute;
  top: 17px;
  right: 16px;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #f6bf38;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(8deg);
  pointer-events: none;
}
.pricing__decoration--stars { width: 40px; height: 30px; }
.pricing__decoration--crown { width: 34px; height: 30px; fill: #fff1b3; transform: rotate(9deg); }
.pricing__meaning { margin: 0 0 18px; }
.pricing__meaning h4 {
  margin: 0 0 10px;
  color: var(--hero-heading);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: normal;
}
.pricing__meaning p { margin: 0; font-size: 15px; line-height: 1.5; }
.pricing__included { margin: 0 0 20px; color: #63758b; font-size: 13px; line-height: 1.5; }
.pricing__included span { margin-right: 4px; }
.pricing__plan h3 {
  margin: 0 0 18px;
  color: var(--hero-heading);
  font-size: 28px;
  font-weight: var(--weight-h3);
  line-height: var(--line-heading);
  text-align: center;
}
.pricing__amount { margin-bottom: 18px; }
.pricing__price {
  margin: 0;
  color: var(--hero-heading);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}
.pricing__monthly { margin: 8px 0 0; font-size: 18px; line-height: 1.4; }
.pricing__old-price { margin: 0 0 6px; color: #63758b; font-size: 20px; line-height: 1.3; }
.pricing__plan--annual { border: 2px solid #91c9f1; }
.pricing__plan--annual .pricing__price { color: var(--hero-blue); }
.pricing__badge {
  align-self: center;
  margin: 0 0 20px;
  padding: 7px 12px;
  border-radius: 12px;
  background: #fff1b3;
  color: var(--hero-heading);
  font-size: 16px;
  font-weight: var(--weight-emphasis);
  line-height: 1.35;
}
.pricing .pricing__cta {
  width: 100%;
  min-height: 56px;
  margin-top: auto;
  padding: 14px 12px;
  font-size: 18px;
}
.pricing__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (min-width: 600px) and (max-width: 1199px) {
  .pricing { padding-inline: 32px; }
}
@media (min-width: 1200px) {
  .pricing {
    padding: 0 0 clamp(140px, 13vw, 220px);
    background-image: linear-gradient(to bottom, #f4fbff, transparent 64px), linear-gradient(to top, #faf8f4, transparent 120px), url("./assets/pricing-desktop.png");
    background-size: 100% 100%, 100% 100%, 100% auto;
    background-position: center top;
  }
  .pricing::before, .pricing::after { display: none; }
  .pricing__divider { top: -33px; height: 54px; }
  .pricing__intro {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 70%;
    max-width: 1120px;
    min-height: 18.58cqw;
    padding-block: 24px;
  }
  .pricing__intro::before {
    position: absolute;
    z-index: -1;
    inset: 24px -8px;
    border-radius: 24px;
    background: #f4fbffe8;
    filter: blur(12px);
    content: "";
    pointer-events: none;
  }
  .pricing__intro p { font-size: clamp(18px, 1.4vw, 23px); }
  .pricing__plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2%;
    width: 73%;
    max-width: none;
    margin-top: 0;
  }
  .pricing__plan {
    min-height: max(340px, 24.8cqw);
    padding: clamp(24px, 2.2vw, 40px) clamp(16px, 1.6vw, 30px);
  }
  .pricing__plan h3 {
    order: 1;
    margin-bottom: 30px;
    font-size: clamp(28px, 2.1vw, 34px);
  }
  .pricing__amount {
    position: relative;
    order: 2;
  }
  .pricing__plan--annual .pricing__old-price {
    position: absolute;
    inset-inline: 0;
    top: -25px;
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
  }
  .pricing__meaning {
    order: 3;
    width: 100%;
    margin-top: auto;
  }
  .pricing__meaning h4 { min-height: 2.5em; }
  .pricing__badge,
  .pricing__included {
    order: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 36px;
  }
  .pricing .pricing__cta { order: 5; margin-top: 0; }
  .pricing__price { font-size: clamp(44px, 3.6vw, 60px); }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .pricing__meaning h4 { font-size: 18px; }
  .pricing__meaning p { font-size: 14px; }
  .pricing__badge { font-size: 14px; }
}

/* Referral finale uses the supplied artwork without cropping the children. */
.referral {
  position: relative;
  isolation: isolate;
  max-width: 1920px;
  margin-inline: auto;
  background: #faf8f4;
  color: var(--hero-text);
}
.referral__picture {
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  display: block;
  pointer-events: none;
  mask-image: linear-gradient(transparent, #000 12%, #000 calc(100% - clamp(64px, 7vw, 120px)), transparent calc(100% - 2px));
}
.referral__picture img { display: block; width: 100%; height: auto; }
.referral__copy { padding: 42px 24px 88vw; }
.referral h2 {
  margin: 0 0 20px;
  color: var(--hero-heading);
  font-size: clamp(34px, 7.8vw, 46px);
  font-weight: var(--weight-h2);
  line-height: 1.05;
}
.referral__lead { margin: 0; font-size: 18px; line-height: 1.5; }
.referral__rewards { display: grid; gap: 26px; margin: 30px 0; padding: 0; list-style: none; }
.referral__rewards li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 14px; }
.referral__icon { display: block; width: 100%; height: auto; transform: rotate(-5deg); }
.referral__rewards h3 { margin: 0 0 8px; color: var(--hero-heading); font-size: 24px; line-height: 1.08; }
.referral__rewards p { margin: 0; font-size: 16px; line-height: 1.5; }
.referral__action { max-width: 440px; }
.referral__note { margin: 0; padding-top: 18px; border-top: 1px solid #203d6526; font-size: 14px; line-height: 1.5; }
.referral .referral__cta { width: 100%; gap: 14px; margin-top: 22px; }
.referral__cta svg { width: 28px; height: 28px; flex: 0 0 auto; }
.referral__signoff { margin: 18px 0 0; color: var(--hero-heading); font-family: var(--font-heading); font-size: 24px; line-height: 1.25; text-align: center; }
.referral__signoff span { color: #f5ad23; white-space: nowrap; }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; max-width: 1920px; margin-inline: auto; padding: 24px; background: #faf8f4; color: var(--hero-heading); font-size: 13px; }
.site-footer__brand { display: flex; align-items: center; gap: 22px; }
.site-footer__brand a { display: block; }
.site-footer__brand img { display: block; width: 140px; height: 62px; object-fit: cover; object-position: 50% 54%; }
.site-footer__brand p { margin: 0; color: #63758b; font-size: 12px; line-height: 1.4; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 18px; }
.site-footer__nav a { color: inherit; text-decoration: none; }
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer a:focus-visible { outline: 2px solid var(--hero-blue); outline-offset: 5px; border-radius: 4px; }
.site-footer__telegram { display: flex; align-items: center; gap: 12px; margin: 0; }
.site-footer__telegram svg { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--hero-blue); color: white; }
@media (min-width: 600px) and (max-width: 1199px) {
  .referral__copy { max-width: 704px; margin-inline: auto; padding: 56px 32px 88vw; }
  .referral__rewards li { grid-template-columns: 56px minmax(0, 1fr); gap: 20px; }
  .referral__rewards p { font-size: 18px; }
  .referral__action { margin-left: 76px; }
  .site-footer { padding-inline: 32px; }
}
@media (min-width: 1200px) {
  .referral { min-height: max(820px, min(56.28vw, 1080.58px)); }
  .referral__copy { width: 45%; margin-left: auto; padding: 52px clamp(40px, 4vw, 76px) 90px 0; }
  .referral h2 { font-size: clamp(42px, 3.4vw, 60px); }
  .referral__lead { font-size: 20px; }
  .referral__rewards { gap: 26px; margin-block: 32px; }
  .referral__rewards li { grid-template-columns: 54px minmax(0, 1fr); gap: 20px; }
  .referral__rewards h3 { font-size: 26px; }
  .referral__rewards p { font-size: 17px; }
  .referral__action { margin-left: 74px; }
  .site-footer { padding: 20px 5%; }
}

/* Compact vertical rhythm: every landing block is at least 100px shorter
   at the main mobile and desktop breakpoints, without shrinking body copy. */
@media (max-width: 599px) {
  .hero__content { padding-top: 24px; }
  .hero__description { margin-top: 18px; }
  .hero__description p + p { margin-top: 10px; }
  .hero__cta { margin-top: 20px; }
  .hero__picture {
    height: min(145vw, 570px);
    overflow: hidden;
  }

  .drawing-story__chapter--storage {
    padding: calc(42vw + 24px) 24px 28px;
  }
  .drawing-story__chapter--storage .drawing-story__art { height: 42vw; }
  .drawing-story__chapter--album {
    padding: 12px 24px calc(78vw + 20px);
  }
  .drawing-story h2 { margin-bottom: 18px; }
  .drawing-story h3 { margin-top: 20px; }
  .drawing-story p + p { margin-top: 10px; }

  .drawings-alive__copy { padding-top: 72px; }
  .drawings-alive h2 { margin-bottom: 18px; }
  .drawings-alive p + p { margin-top: 14px; }
  .drawings-alive .drawings-alive__steps { margin-block: 18px 14px; }
  .drawings-alive__voice { margin-top: 22px; padding-block: 20px 22px; }
  .drawings-alive__picture {
    height: min(110vw, 430px);
    margin-top: 14px;
  }

  .fairytale__picture { height: min(85vw, 660px); }
  .fairytale__copy {
    padding: calc(min(85vw, 660px) + 8px) 24px 110px;
  }
  .fairytale h2 { margin-bottom: 18px; }
  .fairytale p + p { margin-top: 14px; }

  .how-it-works h2 { padding-top: calc(min(24vw, 145px) + 24px); }
  .how-it-works__steps { margin-top: 28px; }
  .how-it-works__step + .how-it-works__step { margin-top: 24px; }
  .how-it-works__art { margin-top: 14px; }
  .how-it-works__art--photo { aspect-ratio: 941 / 370; }
  .how-it-works__art--send { aspect-ratio: 941 / 390; }
  .how-it-works__art--album { aspect-ratio: 941 / 420; }
  .how-it-works__summary { margin-top: 24px; padding-bottom: 72px; }

  .free-trial__copy { padding-top: calc(min(26vw, 150px) + 24px); }
  .free-trial__picture {
    height: min(68vw, 285px);
    margin-top: 16px;
  }
}

@media (min-width: 600px) and (max-width: 1199px) {
  .hero__content { padding-top: 34px; }
  .hero__picture { max-height: 580px; overflow: hidden; }

  .drawing-story__chapter--storage { padding-top: calc(55vw + 24px); padding-bottom: 30px; }
  .drawing-story__chapter--album { padding-top: 14px; padding-bottom: calc(78vw + 24px); }
  .drawings-alive__copy { padding-top: 86px; }
  .drawings-alive__picture { max-height: 470px; }
  .fairytale__picture { height: min(88vw, 676px); }
  .fairytale__copy { padding-top: calc(min(88vw, 676px) + 8px); padding-bottom: 130px; }
  .how-it-works h2 { padding-top: calc(min(24vw, 145px) + 24px); }
  .how-it-works__summary { padding-bottom: 84px; }
  .free-trial__copy { padding-top: calc(min(26vw, 150px) + 24px); }
  .free-trial__picture { max-height: 390px; }
}

/* Blend the illustrated paper edges without stacking another wave on top. */
@media (max-width: 1199px) {
  .drawings-alive__picture {
    mask-image: linear-gradient(transparent, #000 32px, #000 calc(100% - 64px), transparent);
  }
  .fairytale { background: linear-gradient(#fffefd, #fffcf6 120px); }
  .fairytale__divider, .how-it-works__divider { display: none; }
  .fairytale__picture {
    mask-image: linear-gradient(transparent, #000 64px, #000 83%, transparent);
  }
  .fairytale::after {
    mask-image: linear-gradient(transparent, #000 38%, #000 calc(100% - 64px), transparent);
  }
  .how-it-works::before {
    mask-image: linear-gradient(transparent 24px, #000 64px, #000 80%, transparent);
  }
}

@media (min-width: 1024px) {
  .hero { min-height: max(620px, min(48vw, 920px)); }
  .hero__content { padding-block: 54px 64px; }

  .drawing-story__chapter--storage {
    padding: 28px 5% 16px;
  }
  .drawing-story__chapter--storage .drawing-story__copy { width: 56%; max-width: 760px; }
  .drawing-story__chapter--album {
    padding: 14px 5% clamp(32px, 4vw, 72px);
  }
}

@media (min-width: 1200px) {
  .drawings-alive__copy { padding-block: 82px 38px; }
  .drawings-alive h2 { margin-bottom: 18px; }
  .drawings-alive p + p { margin-top: 14px; }
  .drawings-alive__voice { margin-top: 22px; padding-block: 20px 22px; }

  .fairytale { min-height: min(46vw, 880px); }
  .fairytale__copy { padding-block: clamp(68px, 5vw, 96px) clamp(72px, 6vw, 116px); }
  .fairytale h2 { margin-bottom: 18px; }
  .fairytale p + p { margin-top: 14px; }

  .how-it-works h2 { padding-top: clamp(58px, 5vw, 92px); }
  .how-it-works__steps { margin-top: 28px; }
  .how-it-works__scene { aspect-ratio: 1448 / 300; margin-top: 22px; }
  .how-it-works__summary { margin-top: 24px; padding-bottom: 80px; }

  .free-trial { min-height: max(620px, min(48vw, 920px)); }
  .free-trial__copy { padding-block: clamp(58px, 5vw, 92px) clamp(88px, 8vw, 154px); }
}