/* Astrid: same canvas as the phone site, in navy and purple. */
.flow-line svg,
.cord,
.story-loop { stroke: #6d4bb8; }
.flow-line svg { opacity: .4; }
.feature:nth-child(3) .icon-disc { background: #c9d4f2; color: var(--navy); }
.hero-copy > p:not(.v2-kicker) { max-width: 38ch; font-size: 17px; line-height: 1.5; margin-top: 64px; }
.hero-copy > .button { margin-top: 20px; }
.mini-copy p { font-size: 8px; line-height: 1.25; max-height: 5em; overflow: hidden; }
.hero h1 {
  font-size: clamp(2.75rem, 4.8vw, 4.6rem);
  max-width: 11em;
  letter-spacing: -0.055em;
}
.mini-copy h3 {
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.photo-pair:after { content: 'Stay as long as you like.'; color: var(--navy); }

.moment-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 28px 26px 36px;
  background: #fbf9f6;
  color: var(--dark);
}
.moment-photo.moment-card:nth-child(2) { background: #e7e2f8; }
.moment-card p {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
  line-height: 1.4;
  font-weight: 400;
}
.moment-card span {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--purple);
}

.friend-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 26px 22px 28px;
  background: #fbf9f6;
  color: var(--dark);
  overflow: hidden;
}
.friend-card.boy { background: #e7eef8; }
.friend-card .eyebrow { color: var(--purple); }
.friend-card p:last-child {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.4;
}

.closing {
  background: linear-gradient(105deg, #152044 0%, #24367a 48%, #4e3a86 100%);
}
.closing:after { display: none; }
.closing h2 em { font-style: italic; }

.story-quote { background: #fbf9f6; }
.story-quote blockquote {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  line-height: 1.4;
  color: var(--navy);
}
.story-pull {
  margin: 8px 0 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--purple);
}

.button.yellow:hover { background: #edd48a; }

@media (max-width: 720px) {
  .moment-card { padding: 18px 16px 26px; }
  .moment-card p { font-size: 1.15rem; }
  .friend-card { padding: 18px 16px 20px; }
  .story-quote blockquote { font-size: 1.3rem; }
  .hero .taps { display: none; }
  .hero-emblem { right: 14%; bottom: 2%; width: 112px; }
  .hero-emblem__label { font-size: 16px; }
}