:root { color-scheme: light; --orange: #ff914d; --ink: #242424; --muted: #706d6a; --line: #eeebe8; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: #faf9f7; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body { margin: 0; }
button, input { font: inherit; }
a { color: inherit; }
.invite-page { min-height: 100svh; padding: 40px 20px 24px; }
.invite-shell { width: min(440px, 100%); margin: 0 auto; }
.invite-logo { display: block; width: 140px; height: 58px; object-fit: cover; margin: 0 auto 26px; }
.invite-card { padding: 30px; border: 1px solid #f0ece8; border-radius: 30px; background: #fff; box-shadow: 0 10px 40px #38221106; }
.mood-header, #generic-intro { text-align: center; }
.mood-emoji { display: grid; place-items: center; width: 82px; height: 82px; margin: 0 auto 22px; border-radius: 26px; background: #fff2e9; font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: 44px; line-height: 1; }
.eyebrow { margin: 0 0 9px; color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
h1 { margin: 0; font-size: clamp(29px, 7.5vw, 36px); line-height: 1.12; font-weight: 750; letter-spacing: -.045em; text-wrap: balance; overflow-wrap: anywhere; }
p { color: var(--muted); font-size: 14px; line-height: 1.5; }
.mood-facts { display: grid; gap: 12px; margin-top: 25px; padding: 18px; border-radius: 18px; background: #f8f8f7; text-align: left; }
.mood-facts p { display: flex; align-items: flex-start; gap: 12px; margin: 0; color: #4e4c4a; font-size: 14px; line-height: 1.5; }
.mood-facts span { min-width: 0; overflow-wrap: anywhere; }
.mood-facts svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; fill: none; stroke: #89847f; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.join-panel, .joined-panel { margin-top: 24px; }
form { display: grid; gap: 9px; }
input { width: 100%; min-height: 52px; padding: 13px 16px; border: 1px solid #d9d5d0; border-radius: 15px; background: #fff; color: var(--ink); font-size: 16px; }
input::placeholder { color: #76716c; opacity: 1; }
.button { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 52px; padding: 13px 16px; border: 1px solid transparent; border-radius: 16px; background: var(--orange); color: #242424; font-size: 16px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; transition: background .15s; }
.button:hover { background: #ff9e62; }
.button.secondary { border-color: var(--line); background: #fff; color: var(--ink); }
.button.secondary:hover { background: #faf9f7; }
.button:disabled { opacity: .55; cursor: wait; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid #b94e10; outline-offset: 3px; }
.note, .join-hint { margin: 0; font-size: 12px; line-height: 1.5; }
#name-note { margin: 0 2px 5px; }
.join-hint { text-align: center; }
.form-error { color: #b42318; font-size: 13px; margin: 10px 0 0; line-height: 1.5; }
.form-error:empty, #copy-status:empty, #plan-state:empty, #plan-updates:empty { display: none; }
.joined-panel { padding-top: 23px; border-top: 1px solid var(--line); text-align: center; }
.joined-panel h2 { margin: 0 0 6px; font-size: 25px; line-height: 1.2; font-weight: 750; letter-spacing: -.035em; outline-offset: 5px; }
#joined-copy { margin: 0; overflow-wrap: anywhere; }
#plan-state, #plan-updates, #receipt-error { margin: 12px 0 0; }
#plan-state { color: #904810; font-weight: 600; }
.receipt-actions { display: flex; justify-content: center; flex-wrap: wrap; column-gap: 20px; margin-top: 8px; }
.text-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 2px; border: 0; background: transparent; color: #625b55; font-size: 13px; font-weight: 550; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.text-button:hover { color: var(--ink); }
.text-button:disabled { cursor: wait; opacity: .55; }
.leave-confirmation { margin-top: 10px; padding: 14px; background: #fff4ed; border-radius: 16px; }
.leave-confirmation p { margin: 0 0 12px; color: var(--ink); }
.leave-confirmation .text-button { width: 100%; }
.handoff-actions { margin-top: 16px; }
.invite-card:has(#join-panel:not([hidden])) #open-app { min-height: 44px; padding: 8px; border-color: transparent; color: #625b55; font-size: 14px; }
.invite-card:has(#joined-panel:not([hidden])) #open-app { background: var(--orange); border-color: transparent; }
.invite-options { margin-top: 10px; text-align: center; }
.invite-options summary { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px; color: var(--muted); font-size: 12px; cursor: pointer; list-style: none; }
.invite-options summary::-webkit-details-marker { display: none; }
.invite-options summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.invite-options[open] summary::after { transform: translateY(2px) rotate(225deg); }
.invite-options[open] { padding-bottom: 8px; }
.download-banner { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.download-banner .button { margin: 8px 0 12px; }
.receipt-help { margin: 0 auto 8px; max-width: 290px; }
#copy-status { margin-top: 12px; text-align: center; }
.legal-note { max-width: 280px; margin: 20px auto 0; text-align: center; font-size: 11px; line-height: 1.6; color: #78736e; }
.legal-note a { text-underline-offset: 3px; }
#generic-intro > p:not(.eyebrow) { margin: 16px 0 22px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 480px) {
  .invite-page { padding: 24px 16px 22px; }
  .invite-logo { width: 120px; height: 50px; margin-bottom: 20px; }
  .invite-card { padding: 24px; border-radius: 26px; }
  .mood-emoji { width: 72px; height: 72px; margin-bottom: 18px; border-radius: 23px; font-size: 40px; }
  .mood-facts { margin-top: 22px; padding: 15px; }
}
@media (max-width: 350px) { .invite-page { padding-inline: 12px; } .invite-card { padding: 20px 16px; } }
@media (prefers-reduced-motion: reduce) { .button { transition: none; } }