.engagement-card,.engagement-page,.engagement-modal{color:#fff}.engagement-card{margin-top:20px;border:1px solid rgba(255,255,255,.1);border-radius:26px;background:radial-gradient(circle at 85% 10%,rgba(198,37,67,.16),transparent 36%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));box-shadow:0 18px 40px rgba(0,0,0,.22);overflow:hidden}.engagement-card__summary{position:relative;display:grid;grid-template-columns:56px 1fr 34px;align-items:center;gap:14px;width:100%;min-height:88px;border:0;background:transparent;color:inherit;padding:16px 18px;text-align:left;cursor:pointer}.engagement-card__icon svg,.engagement-sheet__icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}.engagement-card__summary-copy{display:grid;gap:4px;min-width:0}.engagement-card__summary-copy strong{display:block;font-size:17px;font-weight:600;line-height:1.22;letter-spacing:-.02em;color:rgba(255,255,255,.96)}.engagement-card__summary-copy small{display:block;color:rgba(255,255,255,.56);font-size:12.5px;line-height:1.3;letter-spacing:.01em}.engagement-card__hero.is-changing{animation:engagement-word-out .28s cubic-bezier(.16,1,.3,1)}.engagement-card__summary-chevron{position:relative;display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.14);border-radius:999px;transition:transform .28s cubic-bezier(.16,1,.3,1),border-color .2s ease}.engagement-card__summary-chevron::before{content:'';width:8px;height:8px;border-top:1.7px solid rgba(255,255,255,.86);border-right:1.7px solid rgba(255,255,255,.86);transform:rotate(45deg) translate(-1px,1px)}.engagement-card__summary:hover .engagement-card__summary-chevron{border-color:rgba(255,255,255,.3)}.engagement-card.is-expanded .engagement-card__summary-chevron{transform:rotate(90deg)}.engagement-card__new{position:absolute;top:12px;right:60px;border:1px solid rgba(247,195,205,.32);border-radius:999px;background:rgba(198,37,67,.18);color:#f7c3cd;padding:3px 8px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.engagement-card__panel{display:grid;gap:14px;padding:0 18px 18px}.engagement-card__panel[hidden]{display:none}.engagement-card__panel .profile-section-heading h4{font-size:12px;line-height:1;color:rgba(255,255,255,.48);font-weight:600;letter-spacing:.1em;text-transform:uppercase}.engagement-card__actions{display:grid;gap:10px}.engagement-card__action{display:grid;grid-template-columns:46px 1fr 14px;align-items:center;gap:14px;width:100%;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.014));color:inherit;padding:12px 14px 12px 12px;text-align:left;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .18s ease;animation:engagement-row-in .38s both}.engagement-card__action:hover{border-color:rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02))}.engagement-card__action:nth-child(2){animation-delay:.045s}.engagement-card__action:nth-child(3){animation-delay:.09s}.engagement-card__action:nth-child(4){animation-delay:.135s}.engagement-card__action:nth-child(5){animation-delay:.18s}.engagement-card__action:active{transform:scale(.985)}.engagement-card__icon,.engagement-sheet__icon{display:grid;place-items:center;border:1px solid var(--engagement-accent);border-radius:16px;color:#fff;background:rgba(255,255,255,.03);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.02)}.engagement-card__icon{width:46px;height:46px}.engagement-card__copy{display:grid;gap:3px}.engagement-card__copy strong{font-size:15px;font-weight:600;letter-spacing:-.01em}.engagement-card__copy small{color:rgba(255,255,255,.58);font-size:12px}.engagement-card__chevron{color:rgba(255,255,255,.48);font-size:18px}.engagement-modal[hidden]{display:none}.engagement-modal{position:fixed;inset:0;z-index:9999;display:grid;align-items:end}.engagement-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}.engagement-sheet{position:relative;z-index:1;display:grid;gap:18px;max-height:min(88vh,760px);overflow:auto;padding:16px 18px 18px;border-radius:28px 28px 0 0;background:linear-gradient(180deg,#1b1719,#121212)}.engagement-sheet__handle{width:44px;height:5px;margin:0 auto;border:0;border-radius:999px;background:rgba(255,255,255,.28)}.engagement-sheet__header{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:12px}.engagement-sheet__icon{width:48px;height:48px}.engagement-sheet__header p{margin:0 0 2px;color:rgba(255,255,255,.58);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.engagement-sheet__header h2{margin:0;font-size:22px}.engagement-sheet form,.engagement-panel{display:grid;gap:14px}.engagement-sheet label,.engagement-panel label{display:grid;gap:6px}.engagement-sheet label span{font-size:13px;color:rgba(255,255,255,.72)}.engagement-sheet input,.engagement-sheet textarea,.engagement-panel textarea{width:100%;border:1px solid rgba(255,255,255,.15);border-radius:14px;background:rgba(255,255,255,.05);color:#fff;padding:13px 14px}.engagement-sheet textarea{min-height:82px}.engagement-sheet__footer{position:sticky;bottom:-18px;display:grid;gap:10px;margin-top:4px;padding-top:10px;background:linear-gradient(180deg,rgba(18,18,18,0),#121212 24%)}.engagement-honeypot{position:absolute;left:-9999px}.engagement-button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;border:0;border-radius:999px;background:#d92d20;color:#fff;padding:0 18px;text-decoration:none;cursor:pointer}.engagement-page{max-width:720px;margin:0 auto;padding:24px 16px 72px}.engagement-hero-card,.engagement-panel{border:1px solid rgba(255,255,255,.12);border-radius:20px;background:rgba(255,255,255,.03);padding:18px}.engagement-panel{margin-top:16px}.engagement-timeline{display:grid;gap:10px;margin:0;padding:0;list-style:none}.engagement-timeline__row{display:flex;justify-content:space-between;gap:12px}.engagement-decline-reasons,.engagement-rsvp-actions{display:flex;flex-wrap:wrap;gap:10px}.engagement-decline-reasons button{border:1px solid rgba(255,255,255,.18);border-radius:999px;background:transparent;color:#fff;padding:8px 12px}.engagement-decline-reasons button.is-selected{border-color:#fff}.engagement-button--accept,.engagement-button--whatsapp{background:#25d366}.engagement-button--decline{background:transparent;border:1px solid rgba(255,255,255,.25)}@keyframes engagement-word-out{0%{opacity:1;transform:translateY(0)}45%{opacity:0;transform:translateY(-8px)}46%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}@keyframes engagement-row-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}@keyframes engagement-portrait-pulse{0%{box-shadow:0 0 0 0 rgba(198,37,67,.42),inset 0 0 0 1px rgba(255,255,255,.06)}70%{box-shadow:0 0 0 9px rgba(198,37,67,0),inset 0 0 0 1px rgba(255,255,255,.06)}100%{box-shadow:0 0 0 0 rgba(198,37,67,0),inset 0 0 0 1px rgba(255,255,255,.06)}}@media (prefers-reduced-motion:reduce){.engagement-card__action,.engagement-card__hero.is-changing,.engagement-card__portrait.is-pulsing{animation:none}.engagement-card__summary-chevron{transform:none!important}}


/* Editorial invitation drawer refinement */
.engagement-modal {
	font-family: 'Manrope', 'Inter', sans-serif;
}
.engagement-sheet {
	gap: 16px;
	padding: 16px 18px 18px;
	border: 1px solid rgba(255,255,255,.08);
	background:
		radial-gradient(circle at 18% 0, rgba(198,37,67,.14), transparent 28%),
		linear-gradient(180deg, #1b1719 0%, #151214 100%);
}
/* Sheet header — compact three-column row: avatar | title | close.       */
/* The avatar is the same circular thumbnail style as the closed card so   */
/* the user feels they're still in conversation with the same person; the  */
/* chosen plan icon sits as a small accent badge in the avatar's corner.   */
.engagement-sheet__header {
	grid-template-columns: 48px 1fr 32px;
	gap: 12px;
	padding: 4px 2px 2px;
}
.engagement-sheet__portrait {
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: rgba(255,255,255,.04);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.engagement-sheet__portrait img {
	width: 100%;
	height: 100%;
	border-radius: 999px;
	object-fit: cover;
	object-position: center 25%;
	display: block;
}
.engagement-sheet__plan-icon {
	position: absolute;
	bottom: -2px;
	right: -2px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: linear-gradient(180deg, #c62543, #921221);
	box-shadow: 0 0 0 2px #1b1719;
	color: #fff;
}
.engagement-sheet__plan-icon svg {
	width: 12px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}
.engagement-sheet__header h2 {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -.02em;
	color: rgba(255,255,255,.96);
}
.engagement-sheet__close {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 999px;
	background: rgba(255,255,255,.02);
	color: rgba(255,255,255,.78);
	font-size: 22px;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}
.engagement-sheet__close:hover {
	border-color: rgba(255,255,255,.32);
	color: #fff;
}
/* Sticky CTA — gradient veil fades content under it so the button feels   */
/* anchored even mid-scroll.                                               */
.engagement-sheet__footer {
	position: sticky;
	bottom: -18px;
	padding-top: 14px;
	padding-bottom: 4px;
	background: linear-gradient(180deg, rgba(21,18,20,0), #151214 30%, #151214);
}
.engagement-sheet__intro {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 16px;
	background: rgba(255,255,255,.025);
	color: rgba(255,255,255,.64);
	font-size: 13px;
	line-height: 1.45;
}
.engagement-sheet form {
	gap: 12px;
}
.engagement-sheet__group {
	display: grid;
	gap: 12px;
	padding: 14px;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 18px;
	background: rgba(255,255,255,.018);
}
.engagement-sheet__group h3 {
	margin: 0 0 2px;
	color: rgba(255,255,255,.48);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1;
	text-transform: uppercase;
}
.engagement-sheet label {
	gap: 7px;
}
.engagement-sheet label span {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .01em;
	color: rgba(255,255,255,.72);
}
.engagement-sheet label em {
	font-style: normal;
	font-weight: 500;
	color: rgba(255,255,255,.42);
}
.engagement-sheet input,
.engagement-sheet textarea {
	border-color: rgba(255,255,255,.1);
	border-radius: 14px;
	background: rgba(8,7,8,.46);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.35;
}
.engagement-sheet input:focus,
.engagement-sheet textarea:focus {
	outline: none;
	border-color: rgba(198,37,67,.72);
	box-shadow: 0 0 0 3px rgba(198,37,67,.14);
}
.engagement-sheet textarea {
	min-height: 88px;
}
.engagement-sheet__footer {
	bottom: -18px;
	padding-top: 14px;
	background: linear-gradient(180deg, rgba(21,18,20,0), #151214 28%);
}
.engagement-button {
	display: grid;
	gap: 2px;
	min-height: 58px;
	border-radius: 16px;
	background: linear-gradient(180deg, #b9162a, #951323);
	font-family: inherit;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.engagement-button span {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
}
.engagement-button small {
	font-size: 11px;
	font-weight: 500;
	color: rgba(255,255,255,.72);
}

/* --- Closed-state portrait + eyebrow + hero copy ----------------------- */
/* The portrait is the emotional anchor — a small circular thumbnail, not  */
/* a gallery image. The whole module feels like an invitation from her    */
/* once a face is sitting next to the headline.                           */
.engagement-card__portrait {
	position: relative;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	overflow: hidden;
	flex-shrink: 0;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
	background: rgba(255,255,255,.04);
}
.engagement-card__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}
.engagement-card__portrait.is-pulsing {
	animation: engagement-portrait-pulse .9s cubic-bezier(.16,1,.3,1);
}

/* Live-presence dot on the portrait when she's online. Lower-right of the
   circle, ringed in the card's base colour so it reads as a sticker on the
   avatar rather than a floating UI element. */
.engagement-card__portrait-presence {
	position: absolute;
	bottom: 1px;
	right: 1px;
	width: 12px;
	height: 12px;
	border-radius: 999px;
	background: #4dd084;
	box-shadow: 0 0 0 2.5px #14100f, 0 0 0 3.5px rgba(77,208,132,.18);
	z-index: 1;
}

/* The eyebrow is now stateful — three tones map to three presence states.
   Default is a muted warm-white (premium magazine label feel) rather than
   the soft pink the old design used; brand red is reserved for the CTAs
   and accents, not for category labelling. */
.engagement-card__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgba(255,235,225,.62);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1;
	margin-bottom: 1px;
}
.engagement-card__eyebrow--online {
	color: #4dd084;
}
.engagement-card__eyebrow--recent {
	color: rgba(255,255,255,.55);
	letter-spacing: .12em;
}

/* Keep the expanded icon family visually coherent — quiet, monochrome,   */
/* single accent. Icons are a supporting cue, not a category badge.       */
.engagement-card__icon {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 14px;
	background: rgba(255,255,255,.025);
	color: rgba(255,255,255,.82);
}
.engagement-card__icon svg,
.engagement-sheet__icon svg {
	stroke-width: 1.7;
	width: 22px;
	height: 22px;
}
.engagement-card__action:hover .engagement-card__icon {
	border-color: rgba(255,255,255,.22);
	color: #fff;
}

/* Panel heading lives between the closed summary and the action list.   */
.engagement-card__panel-heading {
	display: grid;
	gap: 2px;
	padding: 2px 2px 4px;
}
.engagement-card__panel-heading strong {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255,255,255,.7);
}
.engagement-card__panel-heading small {
	font-size: 12px;
	color: rgba(255,255,255,.45);
	line-height: 1.4;
}

/* Override the panel action grid: the icon container is 42px now, and   */
/* we want the rows visibly calmer than the closed-card summary.         */
.engagement-card__action {
	grid-template-columns: 42px 1fr 14px;
}

/* Composer-flow drawer */
.engagement-sheet__summary {
	display: grid;
	gap: 3px;
	padding: 13px 14px;
	border-left: 2px solid rgba(198,37,67,.8);
	background: linear-gradient(90deg, rgba(198,37,67,.1), rgba(255,255,255,.018));
}
.engagement-sheet__summary strong {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -.01em;
}
.engagement-sheet__summary span {
	color: rgba(255,255,255,.58);
	font-size: 12px;
	line-height: 1.4;
}
.engagement-sheet__group {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}
.engagement-sheet__group + .engagement-sheet__group {
	padding-top: 14px;
	border-top: 1px solid rgba(255,255,255,.08);
}
.engagement-quick-times {
	display: flex;
	gap: 8px;
	margin: 2px 0 1px;
}
.engagement-quick-times button {
	min-height: 31px;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 999px;
	background: rgba(255,255,255,.025);
	color: rgba(255,255,255,.72);
	font: inherit;
	font-size: 12px;
	padding: 0 11px;
}
.engagement-quick-times button:active {
	border-color: rgba(198,37,67,.65);
	color: #fff;
}
.engagement-sheet__note {
	display: grid;
	gap: 12px;
	padding-top: 14px;
	border-top: 1px solid rgba(255,255,255,.08);
}
.engagement-sheet__note-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 42px;
	border: 0;
	background: transparent;
	color: rgba(255,255,255,.8);
	font: inherit;
	padding: 0;
	text-align: left;
}
.engagement-sheet__note-toggle span {
	font-size: 14px;
	font-weight: 600;
}
.engagement-sheet__note-toggle small {
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 999px;
	color: rgba(255,255,255,.42);
	font-size: 11px;
	padding: 4px 8px;
}
.engagement-sheet__note-toggle[aria-expanded="true"] small {
	color: rgba(255,255,255,.7);
}
.engagement-sheet__footer {
	gap: 9px;
}
.engagement-sheet__disclaimer {
	margin: 0;
	color: rgba(255,255,255,.5);
	font-size: 12px;
	line-height: 1.35;
	text-align: center;
}
.engagement-button {
	display: grid;
	grid-template-columns: 18px 1fr 12px;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	border: 1px solid rgba(198,37,67,.65);
	border-radius: 14px;
	background: linear-gradient(180deg, #ad1628, #921221);
	padding: 0 16px;
	text-align: center;
}
.engagement-button:disabled {
	border-color: rgba(255,255,255,.1);
	background: rgba(255,255,255,.04);
	box-shadow: none;
	color: rgba(255,255,255,.36);
	cursor: not-allowed;
}
.engagement-button__mark {
	position: relative;
	width: 18px;
	height: 18px;
	border: 1.7px solid currentColor;
	border-radius: 999px;
}
.engagement-button__mark::before {
	content: '';
	position: absolute;
	inset: 4px;
	border-left: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(-45deg) translate(1px,-1px);
}
.engagement-button > span:nth-child(2) {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
}
.engagement-button__arrow {
	width: 8px;
	height: 8px;
	border-top: 1.6px solid currentColor;
	border-right: 1.6px solid currentColor;
	transform: rotate(45deg);
}

/* --- Closed-card chevron nudge ---------------------------------------- */
/* A 2px horizontal tap-hint, slow loop. Scoped to :not(.is-expanded) so it
   never fights the 90deg rotation applied when the card is open.        */
.engagement-card:not(.is-expanded) .engagement-card__summary-chevron {
	animation: engagement-chevron-nudge 1.8s ease-in-out infinite;
}
@keyframes engagement-chevron-nudge {
	0%, 60%, 100% { transform: translateX(0); }
	30% { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
	.engagement-card:not(.is-expanded) .engagement-card__summary-chevron {
		animation: none;
	}
}