/* Landing page — original app illustrations, quiet spacing, paper-like colors. */
.landing {
  text-align: center
}

.section {
  padding-block: 70px
}

.section-title {
  --marker-offset: 4px;
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.8;
  letter-spacing: .14em;
  padding-bottom: var(--marker-offset);
  margin-bottom: 40px
}

.section-title>span {
  background: linear-gradient(transparent 44%, #ead1bd 44%, #ead1bd 98%, transparent 98%);
  background-repeat: no-repeat;
  background-size: 100% calc(100% - var(--marker-offset));
  background-position: left bottom;
  padding: 0 5px var(--marker-offset);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone
}

.hero-shell {
  position: relative
}

.hero {
  --character-width: 370px;
  --character-sink: calc(var(--character-width) * 6 / 198);
  --hands-width: calc(var(--character-width) * 104 / 198);
  --hands-lift: calc(var(--hands-width) * 10 / 104);
  --hands-height: calc(var(--hands-width) * 97 / 454);
  --cloud-height: calc(var(--hands-height) - var(--hands-lift));
  --cloud-diameter: calc(var(--hands-width) * 237 / 454);
  --cloud-spacing: calc(var(--hands-width) * 160 / 454);
  /* Circle centers meet the hand image's cloud edges, as in TonightCloudBoundaryMetrics. */
  --cloud-left-inset: calc(var(--hands-width) * .124487857);
  --cloud-right-inset: calc(var(--hands-width) * .116002385);
  min-height: 650px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #caa58b 0%, #dfbfa7 51%, #f6e1cd 100%)
}

.hero-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  max-width: 1400px;
  margin: auto;
  pointer-events: none
}

.hanging-star {
  position: absolute;
  top: -20px
}

.hanging-star>img {
  width: 100%
}

/* Extra canvas space lets each ornament swing without clipping its edges. */
.hanging-star>.lottie-art {
  inset: 0 auto auto -50%;
  width: 200%;
  aspect-ratio: var(--star-canvas-ratio)
}

.star-long {
  --star-canvas-ratio: 438/1158;
  left: 8%;
  width: 44px
}

.star-short {
  --star-canvas-ratio: 376/632;
  left: 13%;
  width: 55px;
  top: -40px
}

.star-moon {
  --star-canvas-ratio: 652/1120;
  right: 8%;
  width: 75px;
  top: -18px
}

.hero-clouds {
  --cloud-scale: 1.15;
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none
}

.cloud {
  --cloud-width: calc(var(--cloud-size) * var(--cloud-scale));
  position: absolute;
  width: var(--cloud-width);
  max-width: none;
  left: var(--cloud-rest-x);
  top: var(--cloud-y);
  transform: translate(-50%, -50%);
  opacity: .35
}

/* Drift at 0.7 times the original speed, preserving staggered phases. */
.cloud-one {
  --cloud-size: 100px;
  --cloud-y: 58%;
  --cloud-rest-x: 14%;
  --cloud-delay: -2s
}

.cloud-two {
  --cloud-size: 75px;
  --cloud-y: 43%;
  --cloud-rest-x: 52%;
  --cloud-delay: -15.2s
}

.cloud-three {
  --cloud-size: 112.5px;
  --cloud-y: 69%;
  --cloud-rest-x: 86%;
  --cloud-delay: -28.4s
}

.hero-clouds.is-animated .cloud {
  animation: cloud-drift 40s linear infinite;
  animation-delay: var(--cloud-delay);
  animation-play-state: var(--cloud-play-state, paused)
}

@keyframes cloud-drift {
  from {
    left: calc(0px - var(--cloud-width))
  }

  to {
    left: calc(100% + var(--cloud-width))
  }
}

.hero-heading {
  --hero-logo-width: min(74vw, 530px);
  position: relative;
  z-index: 2;
  padding-top: 58px
}

.hero-tagline {
  width: var(--hero-logo-width);
  color: #fff4e8;
  /* Font sizes are in the SVG's 530-unit viewBox, scaled together with the logo. */
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .22em;
  margin: 0 auto -22px
}

.hero-tagline svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible
}

.app-logo {
  position: relative;
  margin: 0 auto 26px;
  width: var(--hero-logo-width);
  aspect-ratio: 900/230;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1.2;
  color: #fff4e8
}

.logo-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  white-space: nowrap;
  letter-spacing: .06em
}

.logo-fallback small {
  font: 15px/2 var(--font);
  letter-spacing: .13em;
  color: #8f6751
}

.lottie-art {
  position: absolute;
  inset: 0
}

.lottie-art svg {
  display: block;
  width: 100% !important;
  height: 100% !important
}

.art-ready>.art-fallback,
.art-ready>.logo-fallback {
  visibility: hidden
}

.store-badge {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: 146px;
  border: 1px solid #67544b;
  border-radius: 7px;
  background: #342b27;
  color: var(--bg);
  padding: 7px 21px;
  font: 11px/1.5 var(--ui);
  letter-spacing: .03em
}

.store-name {
  font: 20px/1.2 var(--ui);
  font-weight: 500;
  letter-spacing: 0
}

.download-note {
  font: 11px/1.5 var(--ui);
  color: #694b3e;
  margin-top: 12px
}

.hero-scene {
  position: relative;
  flex-shrink: 0;
  width: min(100%, 950px);
  height: calc(var(--character-width) * 2048 / 2185 - var(--character-sink));
  margin-inline: auto
}

.peek-art {
  position: absolute;
  width: var(--character-width);
  aspect-ratio: 2185/2048;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(0px - var(--character-sink))
}

.peek-art>.art-fallback {
  width: 220px;
  border-radius: 50%;
  margin: 65px auto 0
}

.hero-radio {
  position: absolute;
  z-index: 4;
  display: block;
  width: 125px;
  bottom: -12px;
  left: calc(50% + 240px);
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  appearance: none
}

.hero-radio:enabled {
  cursor: pointer
}

.hero-radio img {
  width: 100%
}

.hero-radio:enabled:active img {
  transform: scale(.96)
}

.hero-radio[aria-pressed="true"] img {
  filter: drop-shadow(0 0 6px #d9978e80)
}

.radio-feedback {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: 210px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  line-height: 1.8;
  text-align: left
}

.cloud-edge {
  position: absolute;
  inset: auto 0 0;
  height: var(--cloud-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hands-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  z-index: 3;
  pointer-events: none
}

.cloud-edge::before,
.cloud-edge::after {
  content: '';
  grid-row: 1;
  height: 100%;
  background-image: radial-gradient(circle calc(var(--cloud-diameter) / 2) at 50% calc(var(--cloud-diameter) / 2), var(--bg) calc(100% - .5px), transparent 100%);
  background-size: var(--cloud-spacing) var(--cloud-diameter);
  background-repeat: repeat-x
}

.cloud-edge::before {
  grid-column: 1;
  background-position: right calc(var(--cloud-left-inset) - var(--cloud-spacing) / 2) top 0
}

.cloud-edge::after {
  grid-column: 3;
  background-position: left calc(var(--cloud-right-inset) - var(--cloud-spacing) / 2) top 0
}

.hero-hands {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  width: 100%;
  max-width: none
}

.cloud-ground {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 1px);
  height: calc(var(--hands-height) + 1px);
  background: var(--bg)
}

.intro {
  padding-top: 62px;
  padding-bottom: 50px
}

.intro .section-title {
  margin-bottom: 32px
}

.intro-copy {
  font-size: 16px;
  line-height: 2.35;
  letter-spacing: .06em
}

.intro-copy p+p {
  margin-top: 32px
}

.mobile-break {
  display: none
}

/* Keep the next screenshot partly visible, including on wide screens. */
.screenshots {
  padding-top: 72px
}

.screenshot-gallery {
  display: flex;
  max-width: 840px;
  gap: 24px;
  padding: 10px 6px 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent
}

.screenshot-gallery.is-draggable {
  cursor: grab;
  -webkit-user-select: none;
  user-select: none
}

.screenshot-gallery.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none
}

.screenshot-gallery:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 5px;
  border-radius: 16px
}

.screenshot-card {
  flex: 0 0 220px;
  aspect-ratio: 1206/2622;
  border: 2px solid #d0b7a4;
  border-radius: 26px;
  background: var(--bg);
  overflow: hidden;
  box-shadow: 3px 7px 0 #eedbc8;
  scroll-snap-align: start
}

.screenshot-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none
}

.screenshot-note {
  margin-top: 20px;
  padding-inline: 24px;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.8
}

.quill-art>.art-fallback,
.section-clock>.art-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain
}

.movie {
  padding-top: 85px
}

.movie-scene {
  position: relative;
  width: min(100%, 490px);
  height: 360px;
  margin: 0 auto
}

.movie-card {
  position: absolute;
  left: 28px;
  top: 15px;
  width: 215px;
  min-height: 300px;
  background: #f3decb;
  border: 7px solid #d9968e;
  border-radius: 7px;
  padding: 20px 12px;
  color: var(--text)
}

.movie-small {
  display: block;
  font-size: 11px;
  letter-spacing: .03em
}

.movie-name {
  display: block;
  font-size: 20px;
  font-weight: 700;
  margin-top: 5px
}

.movie-card img {
  height: 112px;
  width: auto;
  margin: 16px auto
}

.movie-card p {
  font-size: 14px
}

.movie-character {
  position: absolute;
  right: 7px;
  bottom: 0;
  width: auto;
  height: 390px;
  aspect-ratio: 3085/5686
}

.movie-character>.lottie-art {
  /* Extend the 5686px canvas to 6000px for the shadow, keeping the artwork's scale and position. */
  bottom: calc(-100% * 314 / 5686);
  transform: scaleX(-1)
}

.movie-character>.art-fallback {
  width: 160px;
  margin-top: 130px;
  border-radius: 50%
}

.feature-notebook {
  width: min(calc(100% - 80px), 530px);
  margin: 20px auto 0;
  background: #f6e1ce;
  padding: 45px 65px 53px;
  border-radius: 18px;
  position: relative;
  text-align: left
}

.notebook-rings {
  position: absolute;
  width: 78%;
  height: auto;
  top: -14px;
  left: 11%
}

.feature-notebook .section-title {
  text-align: center;
  margin-bottom: 32px
}

.feature-group+.feature-group {
  margin-top: 27px
}

.feature-group h3 {
  font-size: 17px;
  margin-bottom: 9px
}

.feature-group ul {
  margin: 0;
  padding-left: 1.1em;
  font-size: 15px;
  line-height: 2.05
}

.feature-group small {
  display: block;
  font-size: 13px;
  line-height: 1.7
}

.notebook-quill {
  position: absolute;
  width: 125px;
  aspect-ratio: 326/360;
  right: -56px;
  bottom: 70px
}

.plans {
  padding-top: 10px
}

.section-clock {
  position: relative;
  width: 156px;
  aspect-ratio: 820/1400;
  margin: 50px auto 80px
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
  max-width: 910px;
  margin: 56px auto 0;
  text-align: center
}

.plan-card {
  background: var(--white);
  border-radius: 20px;
  padding: 35px 24px 28px;
  position: relative;
  box-shadow: 0 12px 40px #ca9c7710;
  font-size: 15px;
  line-height: 1.9
}

.plan-card h3 {
  color: #D9978E;
  font-size: 24px;
  letter-spacing: .06em
}

.plan-price {
  margin: 10px 0 25px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap
}

.plan-price>span:not(.price-unit) {
  font: 34px/1.4 var(--font);
  margin-right: 3px
}

.plan-price .price-unit {
  font-size: 13px
}

.plan-detail {
  margin-top: 20px;
  font-size: 13px;
  font-weight: 500
}

.recommend-label {
  position: absolute;
  top: -52px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 112px;
  aspect-ratio: 800 / 586.2;
  padding: 0 10px 10px;
  background: url('../assets/landing/recommend_bubble.svg') center / contain no-repeat;
  font-size: 16px;
  letter-spacing: .12em;
  transform: rotate(9deg)
}

.plan-conditions {
  max-width: 820px;
  margin: 28px auto 0;
  text-align: left;
  font-size: 14px;
  line-height: 1.9
}

.price-note {
  text-align: center;
  color: var(--text-2);
  font-size: 12px
}

.plan-details {
  border-block: 1px solid var(--line);
  margin: 25px 0 20px
}

.plan-details summary {
  cursor: pointer;
  padding: 16px 0;
  font-weight: 500
}

.plan-details>div {
  padding-bottom: 12px
}

.plan-details p {
  margin-bottom: 12px
}

.renewal-notice {
  background: #f8e6d5;
  border-radius: 12px;
  padding: 18px 22px;
  font-size: 13px
}

.plan-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin-top: 18px;
  font-size: 13px
}

.credits {
  padding-top: 30px;
  padding-bottom: 45px
}

.credits>.container>p {
  font-size: 14px;
  margin-bottom: 18px
}

.credits-list {
  font-size: 14px;
  line-height: 2.2;
  max-width: 570px;
  margin: auto
}

.credits-list>div {
  display: flex;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap
}

.credits-list dt::after {
  content: '：'
}

.credits-list dd {
  margin: 0
}

.social-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: var(--text);
  margin-top: 52px;
  text-decoration: none;
  font-size: 13px
}

.social-link:hover {
  color: var(--accent-ink)
}

.x-mark {
  font-family: var(--ui);
  font-size: 39px;
  line-height: 1.6
}

.contact-section {
  overflow: hidden;
  padding-top: 15px
}

.contact-scene {
  position: relative;
  min-height: 230px;
  max-width: 660px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 100px minmax(0, max-content);
  column-gap: 20px;
  justify-content: center;
  align-items: start;
  padding-top: 18px
}

.contact-bubble {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  place-items: center;
  aspect-ratio: 1873.81 / 830;
  padding: 24px 35px;
  background: url('../assets/landing/speech_bubble_2.svg?v=2') center / 100% 100% no-repeat;
  text-align: center;
  color: var(--text);
  font-size: 14px;
  filter: drop-shadow(0 10px 15px #ca9c7710)
}

.contact-post {
  --post-overshoot: -8px;
  display: block;
  width: 100px;
  position: absolute;
  grid-column: 1;
  grid-row: 1;
  bottom: -25px;
  left: 0;
  line-height: 0;
  text-decoration: none;
  transform: rotate(-9deg)
}

.contact-post img {
  width: 100%;
  height: auto
}

.contact-post-trigger {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none
}

.contact-post.is-awaiting {
  opacity: 0;
  pointer-events: none;
  transform: translateY(220px) rotate(-9deg)
}

.contact-post.is-entering {
  animation: post-pop-in 650ms cubic-bezier(.22, .61, .36, 1) 80ms both
}

/* Match the iOS mailbox's 220px rise, short delay and spring-like settling. */
@keyframes post-pop-in {
  0% { transform: translateY(220px) rotate(-9deg); }
  65% { transform: translateY(var(--post-overshoot)) rotate(-9deg); }
  82% { transform: translateY(4px) rotate(-9deg); }
  100% { transform: translateY(0) rotate(-9deg); }
}

.landing .site-footer {
  background: #f8e9d9
}

@media(min-width:1400px) {
  .hero {
    --character-width: 410px;
    min-height: 690px
  }

  .hero-heading {
    padding-top: 70px
  }

  .hero-radio {
    left: calc(50% + 270px)
  }
}

@media(max-width:760px) {
  .hero {
    --character-width: 290px;
    --character-sink: calc(var(--character-width) * 6 / 190);
    --hands-width: calc(var(--character-width) * 86 / 190);
    --hands-lift: calc(var(--hands-width) * 8 / 86);
    --cloud-left-inset: calc(var(--hands-width) * .130091610);
    --cloud-right-inset: calc(var(--hands-width) * .122109525);
    min-height: 480px
  }

  .hero-heading {
    --hero-logo-width: min(76vw, 430px);
    padding-top: 62px
  }

  .hero-tagline {
    font-size: 23px;
    margin-bottom: -18px
  }

  .app-logo {
    margin-bottom: 20px
  }

  .star-long {
    width: 26px;
    left: 7%;
    top: -12px
  }

  .star-short {
    width: 34px;
    left: 13%;
    top: -22px
  }

  .star-moon {
    width: 47px;
    right: 8%;
    top: -7px
  }

  .hero-radio {
    width: 80px;
    left: calc(50% + 158px)
  }

  .hero-clouds {
    --cloud-scale: 1
  }

  .section {
    padding-block: 56px
  }

  .intro {
    padding-top: 42px
  }

  .intro-copy {
    font-size: 14px
  }

  .section-title {
    font-size: 20px;
    margin-bottom: 34px
  }

  .screenshot-gallery {
    gap: 18px
  }

  .screenshot-card {
    flex-basis: 210px;
    border-radius: 24px
  }

  .feature-notebook {
    padding: 40px 45px 45px
  }

  .notebook-quill {
    width: 94px;
    right: -35px
  }

  .plan-grid {
    gap: 15px
  }

  .plan-card {
    padding: 30px 15px 22px;
    font-size: 13px
  }

  .plan-card h3 {
    font-size: 20px
  }

  .plan-price>span:not(.price-unit) {
    font-size: 30px
  }

  .plan-detail {
    font-size: 12px
  }

  .section-clock {
    margin: 10px auto 55px;
    width: 132px
  }
}

@media(max-width:520px) {
  .hero {
    --character-width: 235px;
    min-height: 390px
  }

  .hero-heading {
    --hero-logo-width: 77vw;
    padding-top: 49px
  }

  .hero-tagline {
    font-size: 28px;
    letter-spacing: .16em;
    margin-bottom: -8px
  }

  .app-logo {
    margin-bottom: 19px
  }

  .logo-fallback small {
    font-size: 11px
  }

  .store-badge {
    min-width: 125px;
    padding: 5px 17px;
    font-size: 10px
  }

  .store-name {
    font-size: 17px
  }

  .download-note {
    font-size: 10px;
    margin-top: 9px
  }

  .peek-art>.art-fallback {
    width: 130px;
    margin-top: 50px
  }

  .hero-radio {
    width: 68px;
    left: calc(50% + 104px);
    bottom: -8px
  }

  .section-title {
    font-size: 17px;
    letter-spacing: .09em
  }

  .intro-copy {
    font-size: 14px;
    letter-spacing: .025em;
    line-height: 2.2
  }

  .intro-copy p+p {
    margin-top: 26px
  }

  .mobile-break {
    display: initial
  }

  .intro {
    padding-bottom: 24px
  }

  .screenshot-gallery {
    width: calc(100% - 28px)
  }

  .movie-scene {
    height: 300px;
    max-width: 320px
  }

  .movie-card {
    left: 8px;
    width: 161px;
    border-width: 5px;
    min-height: 249px;
    padding: 16px 9px
  }

  .movie-small {
    font-size: 9px
  }

  .movie-name {
    font-size: 16px
  }

  .movie-card img {
    height: 93px;
    margin-block: 16px
  }

  .movie-card p {
    font-size: 12px
  }

  .movie-character {
    right: 0;
    height: 292px
  }

  .movie-character>.art-fallback {
    width: 115px;
    margin-top: 108px
  }

  .feature-notebook {
    width: calc(100% - 66px);
    padding: 35px 26px 40px;
    border-radius: 12px
  }

  .notebook-rings {
    top: -7px
  }

  .feature-group h3 {
    font-size: 16px
  }

  .feature-group ul {
    font-size: 14px
  }

  .feature-group small {
    font-size: 12px
  }

  .feature-group+.feature-group {
    margin-top: 22px
  }

  .notebook-quill {
    width: 77px;
    right: -28px;
    bottom: 40px
  }

  .plan-grid {
    grid-template-columns: 1fr;
    max-width: 310px;
    gap: 30px;
    margin-top: 35px
  }

  .plan-card {
    padding: 25px 25px 23px;
    font-size: 15px
  }

  .plan-card h3 {
    font-size: 24px
  }

  .plan-price {
    margin-bottom: 15px
  }

  .plan-price>span:not(.price-unit) {
    font-size: 34px
  }

  .plan-detail {
    margin-top: 14px;
    font-size: 13px
  }

  .recommend-label {
    top: -50px;
    width: 100px;
    padding-bottom: 8px;
    font-size: 14px
  }

  .plan-card.recommended {
    margin-top: 26px
  }

  .plan-conditions {
    font-size: 13px
  }

  .price-note {
    font-size: 11px
  }

  .renewal-notice {
    font-size: 12px;
    padding: 16px
  }

  .plan-links {
    font-size: 12px;
    gap: 10px 16px
  }

  .credits-list {
    font-size: 12px
  }

  .credits-list>div {
    gap: 3px
  }

  .credits>.container>p {
    font-size: 12px
  }

  .contact-scene {
    min-height: 200px;
    max-width: 365px;
    grid-template-columns: 70px minmax(0, max-content);
    column-gap: 12px;
    padding-top: 20px
  }

  .contact-post {
    --post-overshoot: -3px;
    width: 70px;
    bottom: -15px
  }

  .contact-bubble {
    font-size: 11px;
    padding: 21px 20px;
    max-width: 255px
  }

  .social-link {
    margin-top: 35px
  }
}