.rsvp-landing {
  background-size: max(100%, 1440px) auto;
  background-repeat: repeat-y;
}
.btn-primary { background: var(--color-rose-ink); color: #fff; box-shadow: none; }
.btn-primary:hover { background: #893350; transform: none; box-shadow: none; }
.section-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 36px;
  padding-block: 22px;
  border-block: 1px solid var(--border-warm);
}
.section-nav a { font-size: 16px; padding: 6px 0; }
.content-section { max-width: 800px; padding-block: 88px; scroll-margin-top: 28px; }
.content-section h2 {
  margin: 0;
  font: 400 clamp(32px, 3.4vw, 48px)/1.4 'HanWangYanKai', 'SatsukiGendaiMincho', 'Noto Serif TC', serif;
  letter-spacing: .015em;
  text-wrap: balance;
}
.content-section h3 { font: 400 23px/1.6 'SatsukiGendaiMincho', 'Noto Serif TC', serif; margin: 0 0 12px; text-wrap: balance; }
.content-section p { margin: 0 0 16px; text-wrap: pretty; }
.section-intro { display: grid; grid-template-columns: 1fr; align-items: start; gap: 28px; }
.section-prose, .timeline-intro { font-size: 1.6rem; line-height: 1.9; }
.free-promise { color: var(--color-rose-ink); }
.creation-steps { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 12px; }
.creation-steps li { flex: 1; display: flex; align-items: baseline; gap: 14px; }
.creation-steps span { font-size: 24px; color: var(--color-rose-ink); }
.creation-steps h3 { font-size: 19px; }
.content-section .small-note { font-size: 1rem; line-height: 1.9; color: #55504c; }
.message-examples { margin-top: 28px; }
.message-example { display: grid; grid-template-columns: 1fr; gap: 28px; padding-block: 38px; border-top: 1px solid var(--border-warm); }
.message-context { max-width: none; }
.message-context h3 { font-weight: 700; }
.message-context p { font-size: 1.2rem; }
.message-content { width: min(580px, calc(100% - 12px)); min-width: 0; justify-self: end; margin-right: 12px; }
.message-bubble { position: relative; padding: 16px 20px; background: #a8e879; border-radius: 16px; color: #202820; }
.message-bubble::after {
  content: ''; position: absolute; right: -9px; bottom: 0; width: 20px; height: 20px;
  background: #a8e879; clip-path: path('M 0 0 C 9 1 7 13 20 17 C 13 20 5 18 0 12 Z');
}
.message-copy { white-space: pre-line; margin: 0; overflow-wrap: anywhere; font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif; }
.message-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.copy-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-warm); border-radius: 0; background: transparent; color: #43533d; cursor: pointer; font: 13px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.copy-button[hidden] { display: none; }
.copy-button:hover { color: #202820; background: rgba(255,255,255,.5); }
.copy-button:disabled { cursor: wait; }
.message-actions .copy-status { min-width: 0; margin: 0; font-size: 14px; line-height: 1.6; text-align: right; color: #43533d; }
.copy-status:empty { display: none; }
.timeline-section { display: grid; grid-template-columns: 1fr; gap: 28px; }
.timeline-intro h2 { margin-bottom: 24px; }
.text-link, .faq-answer a, .creation-steps a { color: var(--color-rose-ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.text-link { display: inline-block; margin-top: 8px; font-size: 16px; }
.sending-timeline { margin: 0 0 0 10px; padding: 0; list-style: none; }
.sending-timeline li { position: relative; padding: 0 0 36px 38px; border-left: 1px solid #b4baa9; }
.sending-timeline li:last-child { padding-bottom: 0; }
.sending-timeline li::before { content: ''; position: absolute; top: 6px; left: -9px; width: 17px; height: 17px; border: 2px solid #4d5b45; border-radius: 50%; background: #f7f7f5; }
.sending-timeline li:last-child::before { background: #4d5b45; }
.sending-timeline .timeline-date { color: #4d5b45; margin-bottom: 10px; font-size: 17px; letter-spacing: .06em; }
.timeline-highlight {
  display: inline;
  padding: .08em .22em;
  background: rgba(255, 211, 77, .58);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.sending-timeline h3 { margin-bottom: 8px; font-size: 25px; font-weight: 700; }
.sending-timeline p:not(.timeline-date) { font-size: 1.2rem; }
.sending-timeline li > p:not(.timeline-date) { color: var(--color-text-light); }
.faq-heading { margin-bottom: 40px; }
.faq-heading h2 { font-size: clamp(1.25rem, 4.5vw, 2rem); white-space: nowrap; }
.faq-heading p { margin-top: 16px; font-size: 1.2rem; }
.faq-list { max-width: 980px; }
.faq-item { border-top: 1px solid var(--border-warm); scroll-margin-top: 24px; }
.faq-item:last-child { border-bottom: 1px solid var(--border-warm); }
.faq-item summary { position: relative; padding: 24px 44px 24px 0; font-size: 20px; line-height: 1.75; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 8px; top: 22px; color: var(--color-rose-ink); font-family: sans-serif; font-size: 24px; }
.faq-item[open] summary::after { content: '−'; }
.faq-item[open] summary { color: var(--color-rose-ink); }
.faq-item summary:focus-visible { outline: 2px solid var(--color-rose-ink); outline-offset: 3px; }
.faq-answer { padding: 0 44px 24px 0; max-width: 45em; font-size: 1.2rem; line-height: 1.95; overflow-wrap: anywhere; }
.faq-answer > :last-child { margin-bottom: 0; }
.faq-answer blockquote { margin: 20px 0; padding: 18px 0; border-block: 1px solid var(--border-warm); color: #55504c; }
.faq-message-example { display: block; max-width: 580px; margin: 8px 0 20px; padding: 0; border: 0; }
.faq-message-example .message-content { width: 100%; margin: 0; }
.faq-message-example .message-bubble { background: rgba(255, 255, 255, .68); border-radius: 0; color: var(--color-text-main); }
.faq-message-example .message-bubble::after { display: none; }
.faq-message-example .message-copy { margin: 0; padding: 0; border: 0; color: inherit; white-space: normal; font: inherit; line-height: inherit; }
.format-options { margin: 0; }
.format-options dt { color: var(--color-rose-ink); margin-top: 18px; }
.format-options dt:first-child { margin-top: 0; }
.format-options dd { margin: 4px 0 0; }
.english-invitation { font-family: Georgia, serif; }
.closing-section { text-align: center; }
.closing-section .btn { margin-top: 30px; }
@media (max-width: 900px) {
  nav.section-nav { display: flex; }
  .section-nav { gap: 6px 24px; }
  .section-nav a { font-size: 15px; }
  .content-section { padding-block: 56px; }
  .section-intro, .message-example, .timeline-section { grid-template-columns: 1fr; gap: 24px; }
  .creation-steps { flex-direction: column; gap: 12px; margin-top: 24px; }
  .creation-steps h3 { margin-bottom: 0; }
  .message-examples { margin-top: 18px; }
  .message-example { padding-block: 30px; }
  .message-context { max-width: none; }
  .message-copy { font-size: 1rem; }
  .message-bubble { padding: 14px 16px; }
  .message-context .copy-status { min-height: 0; }
  .copy-status:empty { display: none; }
  .timeline-intro h2 { margin-bottom: 20px; }
  .sending-timeline { margin: 12px 0 0 10px; }
  .sending-timeline li { padding-left: 28px; }
  .sending-timeline h3 { font-size: 23px; }
  .faq-item summary { font-size: 18px; padding-block: 20px; }
  .faq-answer { padding-right: 8px; }
  .faq-heading { margin-bottom: 28px; }
}

@media (max-width: 768px) {
  .section-prose, .timeline-intro { font-size: 1.1rem; }
  .message-context p, .sending-timeline p:not(.timeline-date), .faq-heading p, .faq-answer { font-size: 1.1rem; }
}