/* WhatsApp reminders: a conversation-led page. Hero = composer + message phone; a big pull quote; the three real
   messages as speech bubbles of different weight; a time-stamped path; a charcoal "you press Send" statement. */

/* hero: text + controls on the left, the message phone on the right */
.rm-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 5vw; align-items: center; padding-top: 128px; padding-bottom: 40px; min-height: min(96vh, 920px) }
.rm-hero .h-xl { font-size: clamp(38px, 4.3vw, 64px) }
.rm-ctl { margin-top: 28px; padding: 20px 22px 18px; border: 1px solid var(--border); border-radius: 14px; background: #fff; display: grid; gap: 14px; max-width: 540px; box-shadow: 0 24px 50px -40px rgba(0,49,91,.45) }
.rm-try { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--ink) }
.rm-try .tag { margin: 0 }
.rm-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 12px }
.rm-l { font-size: 14px; font-weight: 700; color: var(--faint) }
.rm-upi { display: flex; align-items: center; gap: 10px; font-size: 15.5px; color: #2F3640; cursor: pointer }
.rm-upi input { width: 18px; height: 18px; accent-color: var(--ink) }
.rm-vis { display: grid; place-items: center; position: relative }
.rm-vis::before { content: ""; position: absolute; inset: 6% 0; border-radius: 50%; background: radial-gradient(closest-side, #DCF5E9, rgba(220,245,233,0)); z-index: -1 }
.rm-phone { width: min(340px, 86vw) }

/* the chat screen (generic, not a copy of WhatsApp's interface) */
.wa-top { display: flex; align-items: center; gap: 12px; padding: 34px 16px 12px; background: #0B5A4A; color: #fff }
.wa-top small { display: block; font-size: 12px; opacity: .8 } .wa-top b { font-size: 16px }
.wa-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #E7F7F0; color: #0B5A4A; font-weight: 800 }
.wa-body { flex: 1; padding: 14px 12px; background: #EFE9E1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden }
.wa-past { display: flex; flex-direction: column; gap: 10px } .wa-past[hidden] { display: none }
.wa-in { align-self: flex-start; max-width: 82%; padding: 9px 11px 6px; border-radius: 12px 12px 12px 3px; background: #fff; color: #111B21; box-shadow: 0 1px 1px rgba(0,0,0,.08) }
.wa-in p { margin: 0; font-size: 14px; line-height: 1.45 } .wa-in small { display: block; text-align: right; font-size: 11px; color: #667781; margin-top: 2px }
.wa-day { align-self: center; font-size: 11.5px; padding: 4px 10px; border-radius: 8px; background: #fff; color: var(--faint) }
.wa-msg { align-self: flex-end; max-width: 92%; padding: 9px 11px 6px; border-radius: 12px 12px 3px 12px; background: #D9FDD3; color: #111B21; box-shadow: 0 1px 1px rgba(0,0,0,.08) }
.wa-msg p { margin: 0; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere }
.wa-msg small { display: block; text-align: right; font-size: 11px; color: #667781; margin-top: 2px }
.wa-qr { display: grid; justify-items: center; gap: 6px; padding: 10px; margin-bottom: 8px; border-radius: 8px; background: #fff; font-size: 12px; color: var(--faint) }
.wa-qr[hidden] { display: none }
.wa-qr svg { width: 118px; height: 118px; display: block }
.wa-send { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 18px; background: #F0F2F5; font-size: 13px; color: var(--faint) }
.wa-send b { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #0B5A4A; color: #fff; font-size: 15px }

/* the pull quote */
.rm-quote { padding-bottom: clamp(30px, 5vh, 60px); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 6vw; align-items: end }
.rm-quote blockquote { margin: 0; padding-left: 28px; border-left: 4px solid #F3C7C7 }
.rm-quote blockquote p { margin: 0; font: 800 clamp(34px, 4.4vw, 66px)/1.05 var(--font); letter-spacing: -0.035em; color: var(--ink); text-wrap: balance }
.rq-side p { margin: 0 0 16px; color: var(--muted); font-size: 17px } .rq-side b { color: var(--ink) }

/* three tones as real messages: different lengths, stepped down like a conversation */
.rm-tones { background: linear-gradient(180deg, var(--bg), #EEF8F3 25%, #EEF8F3 75%, var(--bg)) }
.rt-list { list-style: none; margin: 44px 0 18px; padding: 0; display: grid; gap: 26px }
.rt-list li { display: grid; grid-template-columns: 300px minmax(0, 680px); gap: 32px; align-items: start; padding-top: 22px; border-top: 1px solid #CFE9DC }
.rt-when b { display: block; font-size: 20px; letter-spacing: -0.01em } .rt-when span { color: var(--muted); font-size: 15.5px }
.rt-bub { position: relative; padding: 16px 18px; border-radius: 16px 16px 4px 16px; background: #D9FDD3; color: #111B21; font-size: 16px; line-height: 1.55; box-shadow: 0 18px 40px -28px rgba(11,90,74,.5) }
.rt-urgent .rt-bub { background: #FFF1D6 } .rt-urgent .rt-when b { color: #9A5B00 }
.rt-qr .rt-bub { background: #fff; border: 1.5px solid #BFE6D4 }

/* time-stamped path */
.rm-path { padding-top: clamp(30px, 5vh, 60px) }
.rp-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink) }
.rp-steps li { padding: 18px 22px 0 0; position: relative }
.rp-steps li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--ink) }
.rp-t { display: block; font: 800 30px/1 var(--font); color: var(--link); margin: 6px 0 10px }
.rp-steps b { font-size: 19px } .rp-steps p { margin: 6px 0 0; color: var(--muted); font-size: 15.5px }

/* "You press Send. Always." */
.rm-you { background: linear-gradient(120deg, #1F2328, #2B3138); color: #fff; margin: 0 var(--gl) clamp(60px, 9vh, 100px); border-radius: 28px }
.rm-you .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5vw; align-items: center; padding-top: clamp(48px, 7vh, 80px); padding-bottom: clamp(48px, 7vh, 80px) }
.rm-you ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 760px }
.rm-you li { padding-left: 30px; position: relative; color: #DCE7F3; font-size: 17.5px }
.rm-you li::before { content: ""; position: absolute; left: 0; top: .35em; width: 16px; height: 16px; background: #5EEAD4; -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat }

@media (max-width: 980px) {
  .rm-hero { grid-template-columns: minmax(0, 1fr); padding-top: 104px; min-height: 0; gap: 18px }
  .rm-phone { aspect-ratio: auto; height: 470px } .wa-top { padding-top: 28px } .rm-ctl { padding: 16px 16px 12px; gap: 10px } .rm-try { font-size: 14px }
  .rm-row { grid-template-columns: minmax(0, 1fr); gap: 6px } .seg { flex-wrap: wrap }
  .rm-quote { grid-template-columns: minmax(0, 1fr); gap: 26px }
  .rt-list li, .rt-list li:nth-child(n) { grid-template-columns: minmax(0, 1fr); margin-left: 0; gap: 10px }
  .rp-steps { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 2px solid var(--ink); padding-left: 18px }
  .rp-steps li::before { top: 24px; left: -25px }
  .rm-you { margin-left: 12px; margin-right: 12px } .rm-you .wrap { grid-template-columns: minmax(0, 1fr); gap: 22px }
}