:root { --blue:#1266a8; --sky:#e9f7ff; --pink:#eb6e88; --pink-soft:#fff0f3; --yellow:#ffc74f; --ink:#194b72; --white:#fff; --shadow:0 12px 30px rgba(37, 115, 157, .16); }
* { box-sizing:border-box; }
html { background:#dff3fc; }
body { margin:0; color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:16px; line-height:1.5; background:radial-gradient(circle at 0 5%,#fff 0 2px,transparent 3px) 0 0/30px 30px,linear-gradient(180deg,#dff3fc,#fff6f4 55%,#e8f7e6); min-height:100vh; }
button,input { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible { outline:3px solid var(--yellow); outline-offset:3px; }
.page-shell { width:min(100%,680px); margin:0 auto; padding:22px 16px 42px; }
.view { animation:appear .25s ease-out; }
.is-hidden { display:none; }
.hero,.form-heading { text-align:center; padding:11px 8px 18px; }
.eyebrow { color:var(--blue); font-size:.88rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; margin:0 0 4px; }
h1,h2,p { margin-top:0; }
h1 { color:var(--blue); font-size:clamp(1.9rem,8vw,3.1rem); line-height:1.06; margin-bottom:8px; }
.hero h1 span { color:var(--pink); font-family:cursive; font-size:1.25em; }
h2 { color:var(--blue); font-size:1.38rem; line-height:1.2; }
.hero-subtitle { color:var(--pink); font-size:1.1rem; font-weight:750; margin:0; }
.invite-image { display:block; width:100%; height:auto; border:6px solid var(--white); border-radius:28px; box-shadow:var(--shadow); }
.event-card,.rsvp-choice,.guest-card,.success-card { background:rgba(255,255,255,.94); border:2px solid rgba(235,110,136,.25); border-radius:24px; box-shadow:var(--shadow); }
.event-card { margin-top:20px; padding:22px 20px; text-align:center; }
.event-card h2 { margin-bottom:13px; }
.event-details p { margin:0 0 12px; }
.event-details small { display:inline-block; margin-top:3px; font-size:.9rem; }
.invitation-copy { background:var(--pink-soft); border-radius:14px; margin:17px 0 0; padding:13px; font-style:italic; font-size:.94rem; }
.rsvp-choice { margin-top:20px; padding:22px 20px; text-align:center; }
.rsvp-choice h2 { margin-bottom:17px; }
.button { width:100%; min-height:52px; border-radius:16px; border:0; padding:12px 18px; font-weight:800; transition:transform .15s,box-shadow .15s,background .15s; }
.button-anchor { display:block; text-decoration:none; }
.button:hover { transform:translateY(-1px); }
.button:disabled { cursor:wait; opacity:.72; transform:none; }
.button-primary { color:#fff; background:var(--pink); box-shadow:0 6px 0 #c94d68; }
.button-primary:hover { background:#df617c; }
.button-secondary { color:#074d87; background:var(--yellow); box-shadow:0 6px 0 #e6a51e; }
.button-link { width:auto; min-height:42px; padding:8px; color:var(--blue); background:transparent; text-decoration:underline; margin-top:15px; font-size:.93rem; }
.back-button { color:var(--blue); background:transparent; border:0; padding:8px 0; font-weight:750; }
.form-heading { padding-top:8px; }
.form-heading h1 { font-size:clamp(1.65rem,7vw,2.35rem); }
.form-heading p:last-child { margin-bottom:0; }
.guest-list { display:grid; gap:15px; margin-bottom:18px; }
.guest-card { padding:18px; position:relative; }
.guest-card h2 { font-size:1.1rem; margin:0 35px 14px 0; }
.remove-guest { position:absolute; right:14px; top:13px; color:#a9425b; background:#fff0f3; border:0; border-radius:10px; min-height:34px; padding:5px 9px; font-weight:750; }
label { display:block; font-size:.95rem; font-weight:800; margin:0 0 6px; }
input[type="text"],input[type="number"] { width:100%; min-height:48px; border:2px solid #bcdceb; border-radius:12px; color:var(--ink); background:#fff; padding:10px 12px; }
input[aria-invalid="true"] { border-color:#c73555; }
.field-error { margin:6px 0 0; color:#b52e4c; font-size:.88rem; font-weight:650; }
.type-label { margin-top:14px; }
.type-options { display:flex; gap:9px; }
.type-option { flex:1; border:2px solid #bcdceb; border-radius:12px; padding:10px; text-align:center; font-weight:700; }
.type-option:has(input:checked) { border-color:var(--blue); background:#edf8ff; }
.type-option input { accent-color:var(--blue); }
.age-field { margin-top:14px; }
.privacy { margin:18px 5px; color:#52728a; font-size:.8rem; text-align:center; }
.form-message { min-height:1.5em; margin:0 0 12px; color:#b52e4c; text-align:center; font-weight:750; }
.honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.success-view { min-height:78vh; display:grid; place-items:center; }
.success-card { width:100%; padding:34px 22px; text-align:center; }
.success-icon { font-size:3.2rem; }
.success-card h1 { margin:11px 0; }
.success-event { display:grid; gap:4px; margin:24px 0; padding:15px; background:var(--sky); border-radius:15px; color:var(--blue); }
@keyframes appear { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (min-width:600px) { .page-shell { padding-top:35px; } .event-card,.rsvp-choice { padding:25px 31px; } }