/* The landing is a full-size invitation demonstration, not a miniature app.
   These rules intentionally leave the builder and standalone recipient alone. */
body[data-view="landing"] {
  background: radial-gradient(ellipse at 72% 38%, #f8e1eb7a, transparent 49%), #fffaf8;
}
body[data-view="landing"] .brand-header {
  height: 94px;
  max-width: 1220px;
  padding: 0 42px;
}
body[data-view="landing"] .brand-header img { width: 137px; height: 78px; }
body[data-view="landing"] .brand-header > span { color: #8a6576; font-size: 13px; letter-spacing: .02em; }
body[data-view="landing"] .landing {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas: "copy art" "action art";
  column-gap: 80px;
  row-gap: 31px;
  max-width: 1180px;
  min-height: min(650px, calc(100svh - 160px));
  margin: 0 auto;
  padding: 46px 42px 48px;
  align-content: center;
  align-items: start;
}
.landing .hero-copy { grid-area: copy; align-self: end; padding-top: 0; }
.landing .eyebrow { color: #a4617d; font-size: 10px; font-weight: 600; letter-spacing: .15em; line-height: 1.5; margin-bottom: 21px; }
.landing .hero-copy h1 { font-size: clamp(33px, 3.4vw, 48px); font-weight: 560; letter-spacing: -1.7px; line-height: 1.16; }
.landing .hero-copy h1 em { display: inline-block; color: #ae4b76; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.055em; font-style: italic; letter-spacing: -1.7px; }
.landing .intro { margin: 24px 0 0; color: #856271; font-size: 15px; line-height: 1.75; letter-spacing: -.15px; }
.landing .hero-visual {
  grid-area: art;
  align-self: center;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 23px 16px 12px;
  border: 1px solid #e9d0d9;
  border-radius: 160px 160px 24px 24px;
  background: radial-gradient(ellipse at 50% 39%, #fffaf5 0, #fff8f5 35%, #f4dce6 100%);
  box-shadow: 0 22px 52px -36px #9e547b58, inset 0 0 0 7px #fff8f64d;
  transform: none;
  isolation: isolate;
}
.landing .hero-paper-caption { display: flex; align-items: center; justify-content: center; gap: 11px; color: #a16f84; font-family: Georgia, "Times New Roman", serif; font-size: 14px; font-style: italic; letter-spacing: .1px; }
.landing .hero-paper-caption i { font-style: normal; font-size: 23px; font-weight: 400; color: #bb849a; }
.landing .hero-visual #hero-preview { height: 336px; margin: 4px 0 0; }
.landing .hero-watch { position: relative; display: flex; width: fit-content; min-height: 44px; margin: 0 auto; padding: 9px 14px; gap: 9px; border: 0; border-radius: 9px; background: transparent; box-shadow: none; color: #8c6277; font-size: 12px; font-weight: 400; text-decoration: underline; text-decoration-color: #cfa6b9; text-underline-offset: 4px; }
.landing .hero-watch:hover { color: #9c3e68; background: #ffffff40; }
.landing .hero-watch > span { font-size: 16px; }
.landing .hero-action { grid-area: action; width: min(100%, 382px); align-self: start; }
.landing .hero-action .primary { min-height: 59px; padding: 15px 48px; border-radius: 18px; font-size: 15px; font-weight: 600; letter-spacing: .02em; background: linear-gradient(115deg, #b4517b 0%, #963e68 100%); box-shadow: 0 10px 22px #a447731f, inset 0 1px #ffffff40; }
.landing .hero-note { max-width: none; margin: 14px -6px 0; color: #896777; font-size: 12px; line-height: 1.55; text-align: center; }
body[data-view="landing"] .landing-footer { padding: 14px 18px 22px; gap: 26px; }
body[data-view="landing"] .landing-footer button { color: #926f7f; min-height: 36px; font-size: 11px; }

/* Keep the real recipient interactive, but remove duplicated page furniture. */
#hero-preview .lyw-recipient { background: transparent; border-radius: 0; }
#hero-preview .lyw-recipient .lr-header,
#hero-preview .lyw-recipient .lr-footer { display: none; }
#hero-preview .lyw-recipient .lr-ambience { opacity: .6; }
#hero-preview .lyw-recipient .lr-ambience::after { display: none; }
#hero-preview .lyw-recipient .lr-opener { min-height: 100%; padding: 15px 8px 13px; gap: 19px; }
#hero-preview .lyw-recipient .lr-intro { display: none; }
#hero-preview .lyw-recipient .lr-opening-art { width: 270px; height: 197px; margin: 0; }
#hero-preview .lyw-recipient .lr-envelope-seal { width: 39px; height: 39px; font-size: 18px; }
#hero-preview .lyw-recipient .lr-note-star { font-size: 25px; }
#hero-preview .lyw-recipient .lr-note-words { font-size: 23px; }
#hero-preview .lyw-recipient .lr-open-hint { min-height: 42px; padding: 9px 17px; font-size: 13px; gap: 10px; color: #934366; border-color: #dcaac0; background: #fffbf7de; box-shadow: 0 3px 12px #a3517410; font-weight: 500; }
#hero-preview .lyw-recipient .lr-open-hint::before { display: none; }
#hero-preview .lyw-recipient .lr-open-arrow { font-size: 18px; }
#hero-preview .lyw-recipient .lr-letter,
#hero-preview .lyw-recipient .lr-choices,
#hero-preview .lyw-recipient .lr-result { padding: 14px 15px 18px; }
#hero-preview .lyw-recipient .lr-title { font-size: 27px; line-height: 1.12; }
#hero-preview .lyw-recipient .lr-message { font-size: 13px; line-height: 1.6; }
#hero-preview .lyw-recipient .lr-letter { width: calc(100% - 18px); margin: 6px auto 12px; }
#hero-preview .lyw-recipient .lr-letter .lr-letter-emblem,
#hero-preview .lyw-recipient .lr-letter .lr-time { display: none; }
#hero-preview .lyw-recipient .lr-letter .lr-message { margin: 13px auto; }
#hero-preview .lyw-recipient .lr-letter .lr-next { margin-top: 15px; min-height: 44px; }

@media (max-width: 900px) and (min-width: 741px) {
  body[data-view="landing"] .landing { padding-inline: 30px; column-gap: 32px; }
  .landing .hero-copy h1 { font-size: 33px; letter-spacing: -1.2px; }
  .landing .hero-copy h1 em { letter-spacing: -1.2px; }
  .landing .intro { font-size: 14px; }
  #hero-preview .lyw-recipient .lr-opening-art { width: 242px; height: 177px; }
}

@media (max-width: 740px) {
  body[data-view="landing"] .brand-header { height: 65px; padding: 0 22px; justify-content: center; }
  body[data-view="landing"] .brand-header img { width: 112px; height: 62px; }
  body[data-view="landing"] .brand-header > span { display: none; }
  body[data-view="landing"] .landing {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "copy" "art" "action";
    gap: 17px;
    width: 100%;
    max-width: 480px;
    min-height: 0;
    padding: 6px 22px 12px;
  }
  .landing .hero-copy { width: 100%; text-align: center; }
  .landing .eyebrow { font-size: 9px; letter-spacing: .115em; margin-bottom: 10px; }
  .landing .hero-copy h1 { font-size: clamp(28px, 7.9vw, 37px); line-height: 1.16; font-weight: 580; letter-spacing: -1.1px; }
  .landing .hero-copy h1 em { font-size: 1.08em; letter-spacing: -1.1px; }
  .landing .intro { margin-top: 12px; color: #81606f; font-size: 14px; line-height: 1.6; }
  .landing .hero-visual { border-radius: 105px 105px 22px 22px; padding: 10px 8px 2px; box-shadow: 0 16px 30px -26px #9e547b58, inset 0 0 0 5px #fff8f64d; }
  .landing .hero-paper-caption { font-size: 12px; gap: 7px; }
  .landing .hero-paper-caption i { font-size: 17px; }
  .landing .hero-visual #hero-preview { height: 245px; margin: 0; }
  .landing .hero-watch { min-height: 35px; padding: 5px 10px 9px; font-size: 11px; }
  .landing .hero-action { width: 100%; }
  .landing .hero-action .primary { min-height: 55px; font-size: 14px; border-radius: 17px; }
  .landing .hero-note { margin: 10px 1px 0; font-size: 11px; line-height: 1.6; }
  body[data-view="landing"] .landing-footer { padding: 5px 15px 14px; gap: 18px; }
  body[data-view="landing"] .landing-footer button { font-size: 10px; min-height: 34px; }
  #hero-preview .lyw-recipient .lr-opener { gap: 12px; padding: 2px 6px 4px; }
  #hero-preview .lyw-recipient .lr-opening-art { width: 238px; height: 172px; margin: 0; }
  #hero-preview .lyw-recipient .lr-envelope-seal { width: 35px; height: 35px; font-size: 16px; }
  #hero-preview .lyw-recipient .lr-open-hint { min-height: 37px; padding: 7px 14px; font-size: 12px; }
  #hero-preview .lyw-recipient .lr-note-words { font-size: 21px; }
  #hero-preview .lyw-recipient .lr-note-star { font-size: 21px; }
  #hero-preview .lyw-recipient .lr-letter .lr-duo { width: 90px; }
  #hero-preview .lyw-recipient .lr-letter .lr-title { font-size: 23px; }
}

/* Fit the transparent 500 × 400 Rive artboard in the existing hero. */
#hero-preview .lyw-recipient.has-rive-envelope .lr-opening-art { width: min(320px, calc(100cqw - 20px), 90cqh); height: auto; aspect-ratio: 5 / 4; }

@media (max-width: 360px) {
  body[data-view="landing"] .landing { padding-inline: 17px; }
  .landing .hero-copy h1 { font-size: 28px; }
  .landing .intro { font-size: 14px; }
}

/* An opened demo becomes a complete readable card; the page may grow, but the
   invitation itself never becomes an embedded scrollbar. */
.landing .hero-visual #hero-preview:has(.lyw-recipient[data-scene="letter"]) { height: auto; min-height: 245px; }
#hero-preview .lyw-recipient[data-scene="letter"] { height: auto; min-height: 0; overflow: visible; container-type: inline-size; }
#hero-preview .lyw-recipient[data-scene="letter"] .lr-stage { height: auto; min-height: 0; flex: 0 0 auto; overflow: visible; }
#hero-preview .lyw-recipient .lr-letter .lr-message { display: block; max-height: none; overflow: visible; -webkit-line-clamp: unset; white-space: pre-wrap; }
#hero-preview .lyw-recipient .lr-letter .lr-journey-actions .lr-next { min-height: 44px; }
#hero-preview .lyw-recipient .lr-letter .lr-journey-actions .lr-no { min-height: 44px; }
@media (max-width: 340px) {
  .landing .hero-visual { padding-inline: 6px; }
  #hero-preview .lyw-recipient .lr-opening-art { width: min(226px, calc(100cqw - 20px)); height: 165px; }
  #hero-preview .lyw-recipient .lr-letter { padding-inline: 12px; }
  #hero-preview .lyw-recipient .lr-letter .lr-title { font-size: 22px; }
}

/* A quiet language control shares the existing logo row. The dialog stays in
   the document's top layer; only its landing-page trigger is made compact. */
body[data-view="landing"] .brand-header:has(.landing-language) {
  position: relative;
  justify-content: center;
  height: 80px;
}
body[data-view="landing"] .brand-header:has(.landing-language) > img { height: 72px; }
body[data-view="landing"] .brand-header:has(.landing-language) > span:not(.landing-language) { display: none; }
body[data-view="landing"] .brand-header > .landing-language { display: block; }
.brand-header .landing-language {
  position: absolute;
  inset-inline-end: 42px;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  max-width: min(80px, calc(50% - 120px));
  min-width: 0;
}
.landing-language .lyw-lp { margin: 0; min-width: 0; }
.landing-language .lyw-lp-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.landing-language .lyw-lp-trigger {
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  padding: 8px;
  gap: 4px;
  justify-content: center;
  border: 1px solid #e7cbd9;
  border-radius: 14px;
  background: #fffcfe;
  box-shadow: 0 2px 8px #a65c8108;
}
.landing-language .lyw-lp-globe { width: 16px; height: 22px; border-radius: 0; background: transparent; }
.landing-language .lyw-lp-globe svg { width: 16px; height: 16px; }
.landing-language .lyw-lp-current { min-width: 0; flex: 0 1 auto; }
.landing-language .lyw-lp-current bdi { display: block; font-size: 12px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landing-language .lyw-lp-caption { display: none; }
.landing-language .lyw-lp-chevron { margin: 0; flex: none; }
.landing-language .lyw-lp-chevron svg { width: 12px; height: 12px; }

@media (max-width: 740px) {
  body[data-view="landing"] .brand-header:has(.landing-language) { height: 65px; }
  body[data-view="landing"] .brand-header:has(.landing-language) > img { width: 112px; height: 62px; }
  .brand-header .landing-language { inset-inline-end: 14px; max-width: calc(50% - 77px); }
  .landing-language .lyw-lp-trigger { padding-inline: 8px; gap: 4px; border-radius: 13px; }
}
@media (max-width: 360px) {
  .brand-header .landing-language { inset-inline-end: 12px; width: 64px; max-width: calc(50% - 75px); }
  .landing-language .lyw-lp-globe { display: none; }
  .landing-language .lyw-lp-trigger { padding-inline: 8px; }
}
/* A single first action: touch the envelope to start your own invitation. */
body[data-view=builder] .landing-stories{display:none}
.landing .hero-copy h1{max-width:480px;font-size:clamp(38px,4vw,58px);line-height:1.04;letter-spacing:-2.3px}
.landing .hero-copy h1 em{font-style:normal;font-family:inherit;font-weight:750;font-size:1.15em;letter-spacing:-3px}
.hero-speed{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:8px 12px;border:1px solid #ead3de;border-radius:30px;color:#a14a72;font-size:12px;line-height:1.4;background:#fff8fbe6}
.landing .hero-visual{padding-bottom:16px}.landing #hero-preview{cursor:pointer}
.landing-stories{max-width:1100px;margin:14px auto 34px;padding:0 30px}
.chat-example{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:40px;background:#fff9fc;border:1px solid #efdae5;border-radius:32px}
.chat-example-copy h2{font-size:32px;line-height:1.15;letter-spacing:-1px;margin:0 0 16px}.chat-example-copy>p:last-child{font-size:14px;line-height:1.65;color:#977487;max-width:330px}.chat-example-copy .eyebrow{font-size:9px;margin-bottom:12px}
.chat-phone{max-width:330px;width:100%;justify-self:center;background:linear-gradient(135deg,#f0e8ed,#e8e0e9);border:5px solid #fff;border-radius:27px;box-shadow:0 16px 35px -25px #75425d73;padding:0 13px 12px;transform:rotate(2deg)}
.chat-phone-head{display:flex;align-items:center;gap:9px;min-height:55px;color:#5e3f51;font-size:12px;line-height:1.3}.chat-phone-head>span:first-child{font-size:29px;font-weight:300}.chat-phone-head i{font-style:normal;font-size:22px;background:#e5d4e2;border-radius:50%;width:32px;height:32px;display:grid;place-items:center}.chat-phone-head small{display:block;font-size:9px;color:#927b8b}
.chat-bubble{margin:0 15px 0 0;padding:10px 9px 6px;border-radius:13px 13px 13px 3px;background:#fff;color:#583e4c;box-shadow:0 2px 3px #4f254c0d}.chat-message-text{display:block;font-size:12px;margin-bottom:7px}.chat-link-card{border-left:3px solid #b86c92;border-radius:5px;background:#fcf3f8;padding:6px}.chat-envelope-art{height:100px;position:relative;display:grid;place-items:center;background:radial-gradient(ellipse,#fffbfa,#f4dbe8);border-radius:5px;margin-bottom:8px;overflow:hidden}.chat-envelope-art::before{content:'';width:125px;height:77px;background:linear-gradient(34deg,#e9a6c4 49.5%,transparent 50%),linear-gradient(-34deg,#e3a1bf 49.5%,#efbdd3 50%);border-radius:8px;transform:rotate(-7deg);box-shadow:0 8px 16px #8e456d25}.chat-envelope-art::after{content:'';position:absolute;width:125px;height:77px;clip-path:polygon(0 0,100% 0,50% 60%);background:#f4cadd;transform:rotate(-7deg);border-radius:8px}.chat-envelope-art>span{position:absolute;z-index:2;background:#ba5987;color:#fff;border:3px solid #ce7ca2;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-size:12px}.chat-link-card b{font-size:12px;display:block;line-height:1.35}.chat-link-card p{font-size:10px;line-height:1.4;margin:4px 0}.chat-link-card small{font-size:9px;color:#a17d91}.chat-message-time{display:block;text-align:right;font-size:8px;color:#a78b9b;margin-top:5px}.chat-example-note{font-size:9px;color:#927a8c;text-align:center;margin:10px 0 0;line-height:1.4}
.audience-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:18px}.audience-cards article{padding:23px;border:1px solid #ead6e1;border-radius:22px;background:#fffafb}.audience-cards article>span{font-family:Georgia,serif;font-size:28px;color:#b85d88}.audience-cards h3{font-size:18px;letter-spacing:-.3px;margin:8px 0}.audience-cards p{font-size:13px;line-height:1.55;color:#927186}
@media(max-width:740px){body[data-view=landing] .landing{gap:15px;padding-top:8px}.landing .hero-copy h1{font-size:38px;line-height:1.04;letter-spacing:-1.9px;max-width:330px;margin:auto}.landing .hero-copy h1 em{letter-spacing:-2px}.landing .intro{font-size:13px;line-height:1.55;margin-top:13px}.hero-speed{font-size:11px;padding:6px 11px;margin-top:12px}.landing .hero-visual #hero-preview{height:230px}.landing .hero-visual{padding-bottom:7px}.landing .hero-note{font-size:10px}.landing-stories{padding:0 22px;max-width:480px;margin-top:26px}.chat-example{display:block;padding:24px 19px;border-radius:25px}.chat-example-copy h2{font-size:26px;text-align:center}.chat-example-copy .eyebrow{text-align:center;font-size:8px}.chat-example-copy>p:last-child{text-align:center;font-size:12px;margin:0 auto 22px}.chat-phone{max-width:285px;margin:auto;transform:rotate(1deg)}.audience-cards{grid-template-columns:1fr;gap:10px}.audience-cards article{padding:16px 18px;display:grid;grid-template-columns:34px 1fr;gap:4px 10px;align-items:center}.audience-cards article>span{grid-row:1 / span 2;font-size:26px}.audience-cards h3{font-size:16px;margin:0}.audience-cards p{font-size:12px}.landing-footer{margin-top:15px}}
@media(max-width:350px){.landing .hero-copy h1{font-size:33px}.landing .hero-visual #hero-preview{height:210px}.landing-stories{padding-inline:16px}.chat-example{padding:21px 13px}}
/* The two-line headline leaves the create action visible on a short iPhone. */
body:not([data-product=valentine]) .landing .hero-copy h1{font-size:clamp(34px,3.4vw,46px);line-height:1.12;max-width:540px;letter-spacing:-1.7px}
body:not([data-product=valentine]) .landing .hero-copy h1 em{font-size:1em;letter-spacing:inherit;font-weight:680}
@media(max-width:740px){body:not([data-product=valentine]) .landing .hero-copy h1{font-size:clamp(25px,7.8vw,32px);line-height:1.15;letter-spacing:-1.35px;max-width:none}}
/* Public seller details and documents remain readable below the product. */
.landing-footer{display:block;text-align:center}.footer-links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}.footer-links a,.merchant-details a{color:inherit;text-decoration:none}.footer-links a:hover,.merchant-details a:hover{text-decoration:underline}.footer-links small{font-size:9px;opacity:.65}.merchant-details{font-size:11px;line-height:1.8;margin:20px auto 0;max-width:400px;color:var(--wow-muted,#8b7480)}
