/* InviteOS frontend — Door scanner (night door) + guest RSVP (parchment invitation) */

:root {
	--night: #0d0b10;
	--night-2: #17141d;
	--night-3: #241f2c;
	--foil: #b98a3c;
	--foil-soft: #d9b571;
	--parchment: #f6f1e7;
	--paper: #fffdf8;
	--line-dark: rgba(217, 181, 113, 0.22);
	--line-light: #e5dccb;
	--ok: #4f7d4c;
	--ok-bright: #6fae6b;
	--warn: #c98a2d;
	--bad: #a3402f;
	--muted-d: #9a8fa3;
	--muted-l: #7d7468;
	--font-ui: 'Sora', system-ui, sans-serif;
	--font-display: 'Cormorant Garamond', Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 16px; }

/* ============ SCANNER ============ */

.ios-scan-body {
	font-family: var(--font-ui);
	background: var(--night);
	color: #ece5da;
	-webkit-font-smoothing: antialiased;
}
#ios-scanner { min-height: 100vh; display: flex; flex-direction: column; }

.sc-top {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--line-dark);
	background: var(--night-2);
	position: sticky; top: 0; z-index: 10;
}
.sc-brand { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--parchment); }
.sc-brand em { font-style: italic; color: var(--foil-soft); }
.sc-event { font-size: 12px; color: var(--muted-d); text-align: right; line-height: 1.5; }
.sc-event b { color: #ece5da; display: block; font-size: 13px; }

.sc-stats {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 1px; background: var(--line-dark);
	border-bottom: 1px solid var(--line-dark);
}
.sc-stat { background: var(--night-2); padding: 12px 8px; text-align: center; }
.sc-stat .v { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--foil-soft); line-height: 1.1; }
.sc-stat .v small { font-size: 14px; color: var(--muted-d); }
.sc-stat .k { font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted-d); margin-top: 3px; }

.sc-main { flex: 1; padding: 18px; max-width: 560px; width: 100%; margin: 0 auto; }

/* PIN gate */
.pin-gate { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 22px; text-align: center; }
.pin-gate h1 { font-family: var(--font-display); font-size: 34px; font-weight: 600; color: var(--parchment); margin: 18px 0 6px; }
.pin-gate p { color: var(--muted-d); font-size: 14px; max-width: 320px; line-height: 1.6; }
.pin-seal {
	width: 74px; height: 74px; border-radius: 99px;
	border: 1.5px solid var(--foil);
	display: flex; align-items: center; justify-content: center;
	color: var(--foil-soft);
}
.pin-input {
	margin-top: 26px;
	font-size: 32px; letter-spacing: 14px; text-align: center;
	width: 280px; padding: 14px 6px 14px 20px;
	background: var(--night-2);
	border: 1px solid var(--line-dark); border-radius: 14px;
	color: var(--parchment);
	font-family: ui-monospace, Menlo, monospace;
}
.pin-input:focus, .sc-search:focus, .rs-field input:focus, .rs-field textarea:focus, .rs-field select:focus, .plus-inp:focus {
	outline: 2px solid var(--foil); outline-offset: 1px;
}

.sbtn {
	border: 0; border-radius: 14px;
	padding: 15px 22px;
	font-size: 15px; font-weight: 600;
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	width: 100%;
	transition: transform 0.1s, opacity 0.15s;
}
.sbtn:active { transform: scale(0.98); }
.sbtn:disabled { opacity: 0.45; }
.sbtn.gold { background: var(--foil); color: #fff8ec; }
.sbtn.ghost { background: var(--night-3); color: #ece5da; border: 1px solid var(--line-dark); }
.sbtn.ok { background: var(--ok); color: #f0f6ef; }
.sbtn.mt { margin-top: 12px; }
.sbtn:focus-visible { outline: 2px solid var(--foil-soft); outline-offset: 2px; }

/* scan area */
.sc-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.sc-tab {
	flex: 1; padding: 11px; border-radius: 11px;
	background: var(--night-2); border: 1px solid var(--line-dark);
	color: var(--muted-d); font-size: 13.5px; font-weight: 600;
}
.sc-tab.on { background: rgba(185, 138, 60, 0.16); color: var(--foil-soft); border-color: var(--foil); }

#qr-reader {
	border-radius: 16px; overflow: hidden;
	border: 1px solid var(--line-dark);
	background: var(--night-2);
}
#qr-reader video { border-radius: 16px; }
.sc-hint { text-align: center; color: var(--muted-d); font-size: 12.5px; margin-top: 10px; }

.sc-search {
	width: 100%; padding: 14px 16px;
	background: var(--night-2); border: 1px solid var(--line-dark);
	border-radius: 14px; color: var(--parchment);
}
.sc-results { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.sc-result {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	background: var(--night-2); border: 1px solid var(--line-dark);
	border-radius: 12px; padding: 13px 15px;
	color: #ece5da; text-align: left; width: 100%;
}
.sc-result b { font-size: 15px; display: block; }
.sc-result .sub { font-size: 12px; color: var(--muted-d); margin-top: 2px; }
.sc-result .in-flag { font-size: 11px; color: var(--ok-bright); font-weight: 700; letter-spacing: 1px; }

/* guest card / verdict */
.verdict {
	border-radius: 18px; padding: 22px 20px; margin-bottom: 16px;
	border: 1px solid var(--line-dark);
	background: var(--night-2);
	animation: pop 0.25s ease;
}
@keyframes pop { from { transform: scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .verdict { animation: none; } .flash { animation: none !important; } }
.verdict.ok { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok), 0 14px 40px rgba(79, 125, 76, 0.25); }
.verdict.warn { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.verdict.bad { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.verdict .vk { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; }
.verdict.ok .vk { color: var(--ok-bright); }
.verdict.warn .vk { color: var(--foil-soft); }
.verdict.bad .vk { color: #d4776a; }
.verdict h2 { font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--parchment); margin: 8px 0 4px; line-height: 1.15; }
.verdict .meta { color: var(--muted-d); font-size: 13px; line-height: 1.7; }
.verdict .meta b { color: #ece5da; }
.chiprow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chip {
	font-size: 11.5px; padding: 5px 11px; border-radius: 99px;
	background: var(--night-3); color: var(--muted-d);
	border: 1px solid var(--line-dark);
}
.chip.gold { color: var(--foil-soft); border-color: var(--foil); }
.chip.green { color: var(--ok-bright); border-color: var(--ok); }

.plus-box { margin-top: 16px; border-top: 1px dashed var(--line-dark); padding-top: 14px; }
.plus-box .pk { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-d); margin-bottom: 9px; }
.plus-inp {
	width: 100%; margin-bottom: 8px;
	background: var(--night); border: 1px solid var(--line-dark);
	border-radius: 11px; padding: 12px 14px; color: var(--parchment);
}

/* fullscreen flash */
.flash {
	position: fixed; inset: 0; z-index: 80;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
	animation: flashfade 1.4s ease forwards;
	pointer-events: none;
	text-align: center; padding: 20px;
}
.flash.ok { background: rgba(53, 92, 50, 0.94); }
.flash.warn { background: rgba(150, 103, 33, 0.94); }
.flash.bad { background: rgba(122, 44, 30, 0.94); }
.flash h1 { font-family: var(--font-display); font-size: 42px; color: #fff; }
.flash p { color: rgba(255, 255, 255, 0.85); font-size: 16px; }
.flash svg { width: 74px; height: 74px; color: #fff; }
@keyframes flashfade { 0% { opacity: 0; } 8% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }

/* recent entries */
.sc-recent { margin-top: 22px; }
.sc-recent h3 { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-d); margin-bottom: 10px; }
.sc-row {
	display: flex; align-items: center; gap: 11px;
	padding: 10px 4px; border-bottom: 1px solid rgba(217, 181, 113, 0.1);
	font-size: 13.5px;
}
.sc-row .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--ok-bright); flex-shrink: 0; }
.sc-row .dot.plus { background: #d8a7a0; }
.sc-row .sub { color: var(--muted-d); font-size: 11.5px; }
.sc-row time { margin-left: auto; color: var(--muted-d); font-size: 11px; white-space: nowrap; }

.sc-err { color: #d4776a; font-size: 13px; margin-top: 12px; text-align: center; min-height: 18px; }

/* ============ RSVP ============ */

.ios-rsvp-body {
	font-family: var(--font-ui);
	background:
		radial-gradient(ellipse at 15% 10%, rgba(216, 167, 160, 0.25), transparent 50%),
		radial-gradient(ellipse at 85% 90%, rgba(185, 138, 60, 0.2), transparent 50%),
		#efe7d8;
	color: #2a2430;
	min-height: 100vh;
}
#ios-rsvp { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 18px 60px; }

.rs-card {
	width: 620px; max-width: 100%;
	background: var(--paper);
	border-radius: 6px;
	box-shadow: 0 30px 80px rgba(42, 36, 48, 0.28), 0 4px 14px rgba(42, 36, 48, 0.15);
	padding: 52px 44px 44px;
	position: relative;
	text-align: center;
}
.rs-card::before {
	content: ""; position: absolute; inset: 14px;
	border: 1px solid #dcc9a2; pointer-events: none;
}
@media (max-width: 560px) { .rs-card { padding: 42px 24px 34px; } }

.rs-eyebrow { font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: #8a7a52; }
.rs-title { font-family: var(--font-display); font-size: 46px; font-weight: 600; color: #2a2430; margin: 14px 0 4px; line-height: 1.1; }
.rs-rule { width: 90px; height: 1px; background: var(--foil); margin: 18px auto; }
.rs-details { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #5f5666; line-height: 2.2; }
.rs-msg { font-family: var(--font-display); font-style: italic; font-size: 20px; color: #6b6070; margin-top: 18px; line-height: 1.55; }
.rs-guest {
	margin-top: 26px; padding: 18px;
	background: #faf5ea; border: 1px solid var(--line-light); border-radius: 10px;
}
.rs-guest .k { font-size: 10.5px; letter-spacing: 3px; text-transform: uppercase; color: #8a7a52; }
.rs-guest .n { font-family: var(--font-display); font-size: 30px; font-weight: 600; margin-top: 4px; }
.rs-guest .a { font-size: 12px; color: var(--muted-l); margin-top: 5px; letter-spacing: 1px; }

.rs-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.rs-choice button {
	padding: 15px; border-radius: 12px; font-size: 15px; font-weight: 600;
	border: 1.5px solid var(--line-light); background: var(--paper); color: #2a2430;
	transition: border 0.15s, background 0.15s;
}
.rs-choice button.yes.on { background: #eef4ec; border-color: var(--ok); color: var(--ok); }
.rs-choice button.no.on { background: #f9efec; border-color: var(--bad); color: var(--bad); }

.rs-form { margin-top: 20px; text-align: left; }
.rs-field { margin-bottom: 14px; }
.rs-field label { display: block; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-l); margin-bottom: 6px; font-weight: 600; }
.rs-field input, .rs-field textarea, .rs-field select {
	width: 100%; border: 1px solid var(--line-light); border-radius: 10px;
	padding: 12px 13px; background: var(--paper); color: #2a2430;
}
.rs-field textarea { min-height: 80px; resize: vertical; }

.rs-send {
	width: 100%; margin-top: 8px;
	background: var(--foil); border: 0; color: #fff8ec;
	padding: 16px; border-radius: 12px;
	font-size: 15px; font-weight: 600; letter-spacing: 0.5px;
}
.rs-send:disabled { opacity: 0.5; }
.rs-send:focus-visible, .rs-choice button:focus-visible { outline: 2px solid #2a2430; outline-offset: 2px; }

.rs-done { padding: 30px 0 10px; }
.rs-done h2 { font-family: var(--font-display); font-size: 34px; font-weight: 600; }
.rs-done p { color: var(--muted-l); margin-top: 10px; line-height: 1.7; }
.rs-foot { margin-top: 26px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #b3a789; }
.rs-load { text-align: center; padding: 80px 20px; color: var(--muted-l); font-size: 14px; }

/* ============ RSVP — full event site sections (v2) ============ */

.rs-page { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 22px; }

.rs-block {
	width: 620px; max-width: 100%;
	background: var(--paper);
	border-radius: 6px;
	box-shadow: 0 18px 50px rgba(42, 36, 48, 0.16);
	padding: 34px 40px;
	position: relative;
}
@media (max-width: 560px) { .rs-block { padding: 28px 24px; } }
.rs-block h3 {
	font-family: var(--font-display); font-size: 27px; font-weight: 600;
	text-align: center; color: #2a2430; margin-bottom: 4px;
}
.rs-block .rs-rule { margin: 14px auto 18px; }
.rs-block p { font-size: 14.5px; line-height: 1.75; color: #4d4550; }
.rs-block p.center { text-align: center; }

/* countdown */
.rs-count { display: flex; justify-content: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.rs-count div {
	min-width: 74px; padding: 12px 8px;
	background: #faf5ea; border: 1px solid var(--line-light); border-radius: 10px;
	text-align: center;
}
.rs-count b { display: block; font-family: var(--font-display); font-size: 32px; font-weight: 600; color: var(--foil); line-height: 1.1; }
.rs-count span { font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-l); }

/* programme */
.rs-prog { list-style: none; }
.rs-prog li {
	display: flex; gap: 16px; align-items: baseline;
	padding: 12px 0; border-bottom: 1px dashed var(--line-light);
}
.rs-prog li:last-child { border-bottom: 0; }
.rs-prog .t {
	font-family: ui-monospace, Menlo, monospace; font-size: 13px;
	color: var(--foil); letter-spacing: 1px; min-width: 62px; flex-shrink: 0;
}
.rs-prog .n { font-size: 15px; color: #2a2430; }

/* directions */
.rs-map-btn {
	display: flex; align-items: center; justify-content: center; gap: 9px;
	width: 100%; margin-top: 14px;
	background: #2a2430; color: var(--parchment);
	border: 0; border-radius: 12px; padding: 15px;
	font-size: 15px; font-weight: 600; text-decoration: none;
}
.rs-map-btn svg { width: 18px; height: 18px; }
.rs-venue { text-align: center; font-family: var(--font-display); font-size: 24px; font-weight: 600; }
.rs-venue-note { text-align: center; color: var(--muted-l); font-size: 13.5px; margin-top: 6px; line-height: 1.6; }

/* contacts */
.rs-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .rs-contacts { grid-template-columns: 1fr; } }
.rs-contact {
	display: block; text-decoration: none;
	background: #faf5ea; border: 1px solid var(--line-light); border-radius: 10px;
	padding: 13px 15px; color: #2a2430;
}
.rs-contact b { display: block; font-size: 14.5px; }
.rs-contact span { font-size: 12.5px; color: var(--foil); letter-spacing: 0.5px; }

/* entry pass */
.rs-pass {
	background: #17141d; color: var(--parchment);
	border-radius: 14px; padding: 26px 24px; text-align: center;
	border: 1px solid rgba(217, 181, 113, 0.3);
}
.rs-pass .k { font-size: 10.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--foil-soft); }
.rs-pass .n { font-family: var(--font-display); font-size: 28px; font-weight: 600; margin: 6px 0 14px; }
.rs-pass .qr { background: #fff; padding: 12px; border-radius: 10px; display: inline-block; line-height: 0; }
.rs-pass .a { font-size: 12px; color: #b6ada2; margin-top: 12px; letter-spacing: 1px; }

.rs-sticky {
	position: sticky; bottom: 12px; width: 620px; max-width: 100%;
	z-index: 5;
}
.rs-sticky button {
	width: 100%; background: var(--foil); color: #fff8ec;
	border: 0; border-radius: 12px; padding: 16px;
	font-size: 15px; font-weight: 600;
	box-shadow: 0 12px 30px rgba(42, 36, 48, 0.3);
}

/* public RSVP extras */
.rs-closed {
	margin-top: 22px; padding: 20px;
	background: #faf5ea; border: 1px solid var(--line-light); border-radius: 12px;
	text-align: center;
}
.rs-closed b { font-family: var(--font-display); font-size: 21px; display: block; margin-bottom: 6px; }
.rs-closed p { font-size: 14px; color: var(--muted-l); }
.rs-spin {
	width: 34px; height: 34px; margin: 22px auto 0;
	border: 3px solid var(--line-light); border-top-color: var(--foil);
	border-radius: 99px; animation: rsspin 0.9s linear infinite;
}
@keyframes rsspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rs-spin { animation-duration: 3s; } }

.rs-address {
	text-align: center;
	font-size: 15px; line-height: 1.65;
	color: #4a4150;
	margin-top: 8px;
	font-weight: 500;
}
.rs-map {
	margin: 20px 0 6px;
	border: 1px solid var(--line-light);
	border-radius: 12px;
	overflow: hidden;
	background: #fbf6ec;
}
.rs-map svg { display: block; width: 100%; height: auto; }

.rs-marks { list-style: none; margin: 14px 0 4px; display: grid; gap: 8px; }
.rs-marks li {
	display: flex; align-items: baseline; gap: 10px;
	font-size: 14px;
	padding: 9px 13px;
	background: #faf5ea;
	border: 1px solid var(--line-light);
	border-radius: 9px;
}
.rs-marks li::before {
	content: ""; width: 7px; height: 7px; border-radius: 99px;
	background: var(--foil); flex-shrink: 0;
}
.rs-marks b { font-weight: 600; color: #2a2430; }
.rs-marks span { color: var(--muted-l); font-size: 12.5px; margin-left: auto; }


/* ============ Invitation column (v3.4) ============ */
/* The references are narrow vertical invitations, not wide web pages.
   Everything is constrained to one slim column with the photo inside the card. */

#ios-rsvp { padding: 0 0 60px; align-items: flex-start; }
.ios-rsvp-body { padding: 0; }

.rs-page {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	padding: 26px 16px 0;
	gap: 16px;
}
@media (max-width: 600px) { .rs-page { padding: 12px 12px 0; gap: 12px; } }

.rs-card, .rs-block, .rs-sticky { width: 100%; max-width: none; }

.rs-card {
	padding: 40px 34px 36px;
	overflow: hidden;
}
@media (max-width: 600px) { .rs-card { padding: 30px 20px 28px; } }

/* when a photo leads the card, it runs edge to edge at the top */
.rs-card.with-hero { padding-top: 0; }
.rs-card.with-hero::before { display: none; }

.rs-hero-in {
	position: relative;
	margin: 0 -34px 26px;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}
@media (max-width: 600px) { .rs-hero-in { margin: 0 -20px 22px; } }
.rs-hero-in img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-hero-veil {
	position: absolute; inset: 0;
	background: linear-gradient(to bottom, rgba(20, 17, 23, 0) 42%, rgba(20, 17, 23, 0.72) 100%);
}
.rs-hero-cap {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 26px 24px 22px;
	display: flex; flex-direction: column; gap: 7px;
	text-align: left;
	color: #fff;
}
.rs-hero-eyebrow {
	font-size: 10px; letter-spacing: 3.2px; text-transform: uppercase;
	color: rgba(255, 255, 255, 0.88);
}
.rs-hero-title {
	font-family: var(--font-display);
	font-size: clamp(30px, 8.4vw, 42px);
	font-weight: 600; line-height: 1.04;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}
.rs-hero-meta { font-size: 12.5px; letter-spacing: 1.2px; color: rgba(255, 255, 255, 0.92); }

/* tighter typographic scale for the narrow column */
.rs-title { font-size: clamp(32px, 8.5vw, 42px); margin: 12px 0 2px; }
.rs-block { padding: 30px 30px 28px; }
@media (max-width: 600px) { .rs-block { padding: 24px 20px 22px; } }
.rs-block h3 { font-size: 24px; }
.rs-details { font-size: 12px; letter-spacing: 1.9px; line-height: 2.05; }
.rs-msg { font-size: 18px; margin-top: 15px; }
.rs-guest { margin-top: 22px; padding: 16px; }
.rs-guest .n { font-size: 25px; }
.rs-monogram { width: 92px; height: 92px; font-size: 30px; margin-bottom: 14px; }
.rs-count4 div { min-width: 62px; padding: 10px 8px; }
.rs-count4 b { font-size: 24px; }
.rs-rule { margin: 14px auto; }
.rs-form { margin-top: 16px; }
.rs-choice { margin-top: 18px; gap: 10px; }
.rs-choice button { padding: 13px 10px; font-size: 14px; }
.rs-palette i { width: 34px; height: 34px; }

/* ============ Layout engine (v3.5) ============
   The card is a flex column; every theme reorders the SAME children with
   `order`, so information architecture varies without any markup branching. */

.rs-card { display: flex; flex-direction: column; }
.rs-card > * { order: 6; }
.rs-card > .rs-hero-in { order: 1; }
.rs-card > .rs-head { order: 2; }
.rs-card > .rs-details { order: 3; }
.rs-card > .rs-count4 { order: 4; }
.rs-card > .rs-cal { order: 5; }
.rs-card > .rs-msg { order: 6; }
.rs-card > .rs-guest { order: 7; }
.rs-card > .rs-form-panel,
.rs-card > .rs-eyebrow,
.rs-card > .rs-choice,
.rs-card > .rs-form,
.rs-card > .rs-send,
.rs-card > .rs-closed,
.rs-card > .rs-adults { order: 8; }
.rs-card > .rs-foot { order: 9; }

.rs-head { display: block; }
.rs-blocks { display: contents; }

/* photo-led themes hide the text head; text-led themes hide the photo caption */
.rs-card.with-hero > .rs-head { display: none; }
.rs-card:not(.with-hero) > .rs-hero-in { display: none; }

/* a soft fade lets the photo melt into the card instead of stopping hard */
.rs-hero-fade {
	position: absolute; left: 0; right: 0; bottom: -1px; height: 42%;
	pointer-events: none;
}

/* ---------- desktop ----------
   Wide screens get the invitation held at a readable width with the detail
   panels alongside it, rather than one endless thin ribbon. */
@media (min-width: 1080px) {
	.rs-page {
		max-width: 1080px;
		display: grid;
		grid-template-columns: 470px minmax(0, 1fr);
		grid-column-gap: 30px;
		align-items: start;
		padding: 40px 24px 0;
	}
	.rs-page > .rs-card { grid-column: 1; position: sticky; top: 28px; }
	.rs-page > .rs-blocks {
		grid-column: 2;
		display: flex;
		flex-direction: column;
		gap: 18px;
	}
	.rs-block { margin: 0; }
	.rs-hero-title { font-size: 40px; }
}

@media (min-width: 1480px) {
	.rs-page { max-width: 1180px; grid-template-columns: 520px minmax(0, 1fr); }
}

/* ============ Conversational mode (v3.7) ============ */

.rs-chat .rs-card { animation: rsIn .34s cubic-bezier(.22,.68,.35,1) both; }
@keyframes rsIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rs-chat .rs-card { animation: none; } }

/* the question that opens the conversation */
.rs-ask {
	font-family: var(--font-display);
	font-size: 27px; line-height: 1.25;
	text-align: center;
	margin: 4px 0 18px;
}
.rs-choice-lg { grid-template-columns: 1fr; gap: 10px; }
.rs-choice-lg button { padding: 17px 14px; font-size: 15.5px; }
@media (min-width: 520px) { .rs-choice-lg { grid-template-columns: 1fr 1fr; } }

.rs-microcopy {
	text-align: center; font-size: 13px; line-height: 1.65;
	color: var(--muted-l); margin-top: 14px;
}
.rs-back {
	display: block; width: 100%; margin-top: 10px;
	background: none; border: 0; padding: 12px;
	font-size: 13.5px; color: var(--muted-l);
}
.rs-back:hover { color: #2a2430; }

.rs-passcode {
	text-align: center; margin: 18px 0 14px;
	font-size: 10.5px; letter-spacing: 3px; text-transform: uppercase;
	color: var(--muted-l);
}
.rs-passcode b {
	display: block; margin-top: 6px;
	font-family: ui-monospace, Menlo, monospace;
	font-size: 26px; letter-spacing: 5px; color: var(--foil);
}

/* progress rail */
.rs-rail {
	display: flex; justify-content: center; gap: 8px;
	margin: 18px auto 4px; flex-wrap: wrap;
}
.rs-rail span {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
	color: var(--muted-l); opacity: .55;
}
.rs-rail span i {
	width: 20px; height: 20px; border-radius: 99px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid currentColor; font-style: normal; font-size: 10px;
}
.rs-rail span.now { opacity: 1; color: var(--foil); font-weight: 700; }
.rs-rail span.now i { background: var(--foil); color: #fff; border-color: var(--foil); }
.rs-rail span.done { opacity: .85; }
.rs-rail span.done i { background: var(--foil-soft); border-color: var(--foil-soft); color: #fff; }
@media (max-width: 460px) {
	.rs-rail span { font-size: 0; gap: 0; }
	.rs-rail span i { font-size: 10px; }
}

/* conversational pages stay single-column on desktop — it is a focused flow */
@media (min-width: 1080px) {
	.rs-page.rs-chat {
		display: flex; flex-direction: column;
		max-width: 620px;
	}
	.rs-page.rs-chat > .rs-card { position: static; }
	.rs-page.rs-chat > .rs-blocks { display: flex; flex-direction: column; gap: 18px; }
}

/* decorative layers must never swallow a tap */
.rs-hero-veil,
.rs-card::before, .rs-card::after,
.rs-block::before, .rs-block::after,
.rs-form-panel::before, .rs-form-panel::after,
.rs-hero-in::before, .rs-hero-in::after { pointer-events: none; }
.rs-choice button, .rs-send, .rs-back, .rs-map-btn, .rs-step button { position: relative; z-index: 2; }

/* the invitation line between the hosts and the event name */
.rs-intro {
	font-family: var(--font-display, 'Cormorant Garamond'), serif;
	font-style: italic;
	font-size: 17px;
	line-height: 1.5;
	color: var(--muted-l);
	margin: 10px auto 0;
	max-width: 26em;
	text-transform: none;
	letter-spacing: 0;
}
.rs-hero-intro {
	display: block;
	font-family: var(--font-display, 'Cormorant Garamond'), serif;
	font-style: italic;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.92);
	margin-top: 2px;
	text-transform: none;
	letter-spacing: 0;
}
@media (min-width: 1080px) { .rs-intro { font-size: 18.5px; } }

/* add to calendar */
.rs-cal-add { margin-top: 18px; }
.rs-cal-add.bare { margin-top: 0; }
.rs-cal-add-k {
	font-size: 10.5px; letter-spacing: 2.6px; text-transform: uppercase;
	color: var(--muted-l); margin-bottom: 10px; text-align: center;
}
.rs-cal-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 420px) { .rs-cal-btns { grid-template-columns: 1fr; } }
.rs-cal-btn {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 8px; border-radius: 10px; text-decoration: none;
	border: 1px solid var(--line-light); background: var(--paper, #fffdf8);
	color: inherit; font-size: 12.5px; font-weight: 600;
	transition: border-color .15s, transform .12s;
}
.rs-cal-btn:hover { border-color: var(--foil); transform: translateY(-1px); }
.rs-cal-btn svg { width: 17px; height: 17px; color: var(--foil); flex-shrink: 0; }
.rs-cal-note { text-align: center; font-size: 11.5px; color: var(--muted-l); margin-top: 9px; }
@media (prefers-reduced-motion: reduce) { .rs-cal-btn:hover { transform: none; } }