/* Landing-only refinement. Shared account and billing surfaces keep their styles. */
.page-landing .hero {
  gap: clamp(2rem, 4vw, 4rem);
  padding-top: 8.5rem;
  padding-bottom: 4.5rem;
  align-items: center;
}
.page-landing h1.hero-h {
  font-size: clamp(2.7rem, 4.65vw, 4.25rem);
  line-height: 1.07;
  letter-spacing: -.05em;
}
.page-landing .hero-lede { font-size: 1rem; line-height: 1.8; }
.page-landing .hero-visual { min-width: 0; }
.page-landing .hero-visual::before { opacity: .45; }
.page-landing .trust-strip { font-size: .8rem; line-height: 1.6; }
.page-landing .btn, .page-landing .nav-cta { box-shadow: 0 6px 22px #ce356821, inset 0 1px 0 #ffffff17 !important; }
.page-landing :is(.section-title, .final h2) { line-height: 1.12; letter-spacing: -.045em; }
.page-landing :is(.section-sub, .value-point p, .flow-copy p, .faq-a) { line-height: 1.75; }
.page-landing :is(.value-point p, .flow-card-compact .flow-copy p) { font-size: .94rem; color: #b1acb8; }
.page-landing :is(.flow-card, .story-plan, .story-max, .edge-card, .demo-card) { border-radius: 22px; }
.page-landing .flow-card:hover { transform: translateY(-3px); }
.page-landing .faq-item { border-color: #ffffff12; }
.page-landing .faq-q { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.page-landing .demo-drop { border-color: #ffffff26; background: #ffffff03; }
.page-landing .demo-drop:hover { border-color: #e5487b; background: #e5487b08; }
.page-landing .demo-note { color: #a49daa; line-height: 1.6; }
.page-landing :is(#demo, #how, #pricing) { scroll-margin-top: 110px; }

/* Crisp, responsive product mockup: every message remains real text. */
.chat-scene {
  position: relative;
  isolation: isolate;
  width: min(100%, 490px);
  height: 650px;
  margin: 0 auto;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.chat-scene::before {
  content: '';
  position: absolute;
  inset: 12% -2% 9%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, #d8326629, #d8326600 68%);
}
.chat-phone {
  position: absolute;
  top: 8px;
  left: 8%;
  width: 318px;
  height: 565px;
  padding: 10px;
  border: 1px solid #747078;
  border-radius: 49px;
  background: linear-gradient(130deg, #454047, #161318 28%, #060608 65%, #39363c);
  box-shadow: 0 28px 65px #0009, inset 0 0 0 3px #19171b, 0 0 0 1px #000;
}
.chat-phone::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid #ffffff0e;
  border-radius: 40px;
  background: linear-gradient(165deg, #1e1b23, #111015 65%);
}
.chat-phone::after {
  content: '';
  position: absolute;
  left: -3px;
  top: 126px;
  height: 54px;
  width: 3px;
  border-radius: 2px;
  background: #575159;
  box-shadow: 0 65px #575159;
}
.chat-phone > * { position: relative; }
.phone-status { height: 43px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 13px; font-weight: 600; }
.phone-island { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 89px; height: 25px; border-radius: 30px; background: #030305; }
.phone-island::after { content: ''; position: absolute; right: 10px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: #101421; box-shadow: inset 0 0 0 2px #141b2b; }
.phone-indicators { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: -1px; }
.phone-indicators i { width: 19px; height: 10px; border: 1px solid #c4beca; border-radius: 3px; background: #e1dde5; box-shadow: inset 0 0 0 2px #19171e; }
.phone-contact { display: flex; align-items: center; gap: 10px; padding: 9px 12px 15px; border-bottom: 1px solid #ffffff0c; }
.phone-back { font-size: 30px; line-height: 1; color: #f17ba1; }
.contact-avatar { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #e9c5d12e; border-radius: 50%; background: linear-gradient(135deg, #a66c86, #4e354c); font-size: 16px; }
.phone-contact b { font-size: 14px; font-weight: 600; }
.phone-contact small { display: block; font-size: 12px; color: #a6a1ad; }
.contact-more { margin-left: auto; letter-spacing: 2px; font-size: 22px; color: #a9a0ae; }
.phone-conversation { padding: 16px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.chat-date { align-self: center; font-size: 12px; color: #aaa2af; margin-bottom: 9px; }
.chat-bubble { max-width: 92%; padding: 12px 14px 8px; font-size: 15px; line-height: 1.5; letter-spacing: -.015em; }
.chat-bubble small { display: block; margin-top: 4px; text-align: right; font-size: 11px; color: #bbaebc; }
.chat-bubble small span { color: #f5a5c2; }
.bubble-out { align-self: flex-end; border-radius: 18px 18px 5px 18px; background: #412537; border: 1px solid #d997b31c; }
.bubble-in { border-radius: 18px 18px 18px 5px; background: #29262f; border: 1px solid #ffffff0b; }
.chat-context { display: flex; align-items: center; gap: 7px; margin: 5px auto 0; font-size: 11px; color: #ba9dac; }
.chat-context > span { width: 5px; height: 5px; border-radius: 50%; background: #e5487b; box-shadow: 0 0 10px #e5487b88; }
.phone-compose { position: absolute; left: 23px; right: 23px; bottom: 35px; display: flex; align-items: center; gap: 9px; color: #98909f; font-size: 21px; }
.phone-compose > div { display: flex; justify-content: space-between; align-items: center; flex: 1; height: 32px; padding: 0 10px; border: 1px solid #ffffff16; border-radius: 20px; font-size: 12px; }
.phone-compose > span:last-child { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #9c3155; color: #fff; font-size: 19px; }
.phone-home { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); width: 102px; height: 4px; border-radius: 5px; background: #d5cfd9; }
.reply-preview { position: absolute; z-index: 2; top: 405px; right: 0; width: min(350px, 95%); padding: 19px 21px 15px; border: 1px solid #de709577; border-radius: 22px; background: linear-gradient(125deg, #35202d, #1b151e 75%); box-shadow: 0 20px 50px #0008, 0 0 30px #d8326614, inset 0 1px 0 #ffffff15; }
.reply-preview-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.reply-brand { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 650; }
.reply-brand img { width: 23px; height: 26px; }
.reply-ready { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #c6b3c0; }
.reply-ready i { width: 5px; height: 5px; border-radius: 50%; background: #8ed4ae; }
.reply-preview p { margin: 20px 0; font-family: var(--product-display); font-size: 25px; font-weight: 600; line-height: 1.3; letter-spacing: -.035em; color: #fff5fa; }
.reply-preview-foot { display: flex; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid #ffffff10; font-size: 11px; color: #c7afbd; }
.reply-preview-foot > span:last-child { color: #ee8ead; }
.chat-scene figcaption { position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; color: #918895; font-size: 12px; letter-spacing: .02em; }
.chat-scene figcaption span { color: #ccc0cc; }

/* The comparison reads as two chat windows, with consistent message direction. */
.page-landing .value-visual::after { box-shadow: inset 0 0 0 1px #ffffff0d; }
.page-landing .rival-duel { padding: 26px; gap: 17px; background: radial-gradient(ellipse at 30% 20%, #74264425, transparent 70%), #101014; }
.page-landing .rival-duel .rival-card { padding: 20px; gap: 9px; border-radius: 22px; background: #19171e; border: 1px solid #ffffff19; box-shadow: 0 12px 28px #0003; backdrop-filter: none; }
.page-landing .rival-duel .rival-card-win { border-color: #d55c874f; background: linear-gradient(145deg, #2b1d28, #19171e 75%); }
.page-landing .rival-duel .rival-card::before { display: none; }
.page-landing .rival-head { padding-bottom: 15px; margin-bottom: 7px; border-bottom: 1px solid #ffffff0d; }
.page-landing .rival-tag { display: flex; align-items: center; gap: 9px; font-size: 13px; text-transform: none; letter-spacing: 0; color: #eee5ee; }
.page-landing .rival-duel .rival-card:not(.rival-card-win) .rival-tag { color: #d5ccd9; }
.rival-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #ffffff08; border: 1px solid #ffffff14; color: #c5b7c6; font-size: 9px; letter-spacing: .05em; }
.page-landing .rival-status { font-size: 11px; letter-spacing: 0; text-transform: none; color: #aaa0b1; }
.page-landing .rival-status-online { color: #9dceaf; }
.page-landing .rival-duel .rival-bubble { align-self: flex-end; max-width: 90%; background: #62304a; border: 1px solid #ffffff0a; border-radius: 15px 15px 4px 15px; padding: 11px 14px; font-size: 15px; line-height: 1.5; box-shadow: none; }
.page-landing .rival-duel .rival-bubble-her,
.page-landing .rival-duel .rival-bubble-ghost { align-self: flex-start; border-radius: 15px 15px 15px 4px; color: #e4dce8; background: #2a2631; }
.page-landing .rival-duel .rival-bubble::after,
.page-landing .rival-typing::after { display: none; }
.page-landing .rival-highlight { color: inherit; font-weight: 600; }
.page-landing .rival-time { align-self: flex-end; color: #a398ac; font-size: 11px; margin: -4px 3px 5px; }
.page-landing .rival-time-her,
.page-landing .rival-bubble-ghost + .rival-time { align-self: flex-start; }
.page-landing .rival-typing { align-self: flex-end; font-size: 13px; border-radius: 15px 15px 4px 15px; box-shadow: none; color: #b0a6ba; }
.page-landing .rival-timer { font-size: 29px; letter-spacing: .02em; text-shadow: none; color: #e897ac; }
.page-landing .rival-meta { color: #ada1b4; font-size: 12px; }
.page-landing .rival-vs { padding: 0; border: 0; background: transparent; box-shadow: none; color: #a392a7; font-size: 11px; letter-spacing: .2em; }

@media (max-width: 980px) {
  .page-landing .hero { padding: 8.5rem 1.4rem 3.5rem; gap: 2.5rem; }
  .page-landing h1.hero-h { font-size: clamp(2.5rem, 6.4vw, 3.6rem); }
  .page-landing .hero-visual { width: min(100%, 490px); max-width: 490px; }
}
@media (max-width: 520px) {
  .page-landing .hero { padding: 7rem 1.25rem 2.7rem; gap: 1.8rem; }
  .page-landing h1.hero-h { font-size: clamp(2rem, 8.5vw, 2.7rem); letter-spacing: -.045em; line-height: 1.1; }
  .page-landing .hero-lede { font-size: 1rem; }
  .page-landing .trust-strip { gap: .5rem 1rem; font-size: .78rem; }
  .chat-scene { height: 660px; max-width: 360px; }
  .chat-phone { left: 2%; width: 292px; height: 575px; }
  .reply-preview { top: 415px; width: 96%; padding: 18px; }
  .reply-preview p { font-size: 24px; }
  .page-landing .rival-duel { padding: 18px; }
  .page-landing .rival-duel .rival-card { padding: 16px; }
  .page-landing .rival-duel .rival-bubble { font-size: 14px; }
  .page-landing .faq-q { font-size: 1rem; }
}
@media (max-width: 360px) {
  .chat-phone { left: 0; width: 100%; max-width: 292px; }
  .reply-preview { width: 100%; }
  .reply-preview p { font-size: 22px; }
}