@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Fraunces:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  --ef-bg: #f2f5f2;
  --ef-card: #ffffff;
  --ef-ink: #14211b;
  --ef-muted: #68766e;
  --ef-line: #e2e8e3;
  --ef-teal: #2a6b57;
  --ef-teal-deep: #1f5546;
  --ef-teal-soft: #e3efe9;
  --ef-gold: #e6b13d;
  --ef-gold-soft: #faf0d8;
  --ef-danger: #b3261e;
  --ef-shadow: 0 18px 44px rgba(20, 33, 27, .09);
  /* The Matchmaker's Letter voice: warm paper surfaces, serif hand. */
  --ef-paper: #faf7f0;
  --ef-paper-edge: #efe9dc;
  --ef-serif: 'Fraunces', 'Iowan Old Style', Palatino, Georgia, serif;
}

#screen-event-first {
  position: fixed;
  inset: 0;
  z-index: 8990;
  overflow: hidden;
  background: var(--ef-bg);
  color: var(--ef-ink);
  font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Bottom chrome, declared once. The mobile navigation is measured at runtime
     and combined with the device safe area; desktop keeps this at zero. */
  --ef-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ef-nav-h: 0px;
  --ef-nav-gap: 0px;
  --ef-nav-bottom: 0px;
  --ef-bottom-chrome: 0px;
  --ef-decide-tail: 4px;    /* opaque strip below the decide buttons */
  --ef-bg-0: rgba(242, 245, 242, 0);  /* --ef-bg at zero alpha */
}

/* `hidden` must actually hide. Any author `display` declaration outranks the
   user-agent's [hidden] { display: none }, and this sheet sets display on
   plenty of things — so `el.hidden = true` was silently doing nothing. That is
   how the membership modal came to show BOTH the PayPal component and the
   redirect fallback at once: the JS un-hides exactly one, and the CSS kept the
   other on screen. The trap had already been hit and patched one selector at a
   time; this is the general fix. */
#screen-event-first [hidden] { display: none !important; }

#screen-event-first *, #screen-event-first *::before, #screen-event-first *::after { box-sizing: border-box; }
#screen-event-first button, #screen-event-first input, #screen-event-first select { font: inherit; }
#screen-event-first button { margin: 0; }

.ef-shell { min-height: 100dvh; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.ef-sidebar { position: sticky; top: 0; height: 100dvh; padding: 28px 18px; background: #fbfcfb; border-right: 1px solid var(--ef-line); display: flex; flex-direction: column; }
.ef-brand { display: flex; gap: 11px; align-items: center; padding: 0 10px 28px; color: var(--ef-ink); }
.ef-brand-mark { width: 38px; height: 38px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--ef-teal), var(--ef-teal-deep)); box-shadow: 0 8px 22px rgba(42,107,87,.24); }
.ef-brand strong { font-size: 16px; line-height: 1.1; display: block; }
.ef-brand span { color: var(--ef-muted); font-size: 11px; }
.ef-nav { display: grid; gap: 8px; }
.ef-nav-button { width: 100%; min-height: 48px; border: 0; border-radius: 14px; background: transparent; color: var(--ef-muted); display: flex; align-items: center; gap: 12px; padding: 0 14px; font-weight: 700; cursor: pointer; text-align: left; position: relative; }
.ef-nav-button:hover { background: var(--ef-teal-soft); color: var(--ef-teal-deep); }
.ef-nav-button[aria-current='page'] { background: var(--ef-teal); color: #fff; box-shadow: 0 10px 24px rgba(42,107,87,.18); }
.ef-nav-icon { width: 22px; height: 22px; display: grid; place-items: center; }
.ef-nav-button[data-ef-private-access] .ef-nav-icon { position: relative; }
.ef-nav-button[data-ef-membership-locked] { color: #6f7f78; background: #f2f6f3; }
.ef-nav-button[data-ef-membership-locked]:hover { color: var(--ef-teal-deep); background: var(--ef-teal-soft); }
.ef-nav-private { position: absolute; right: -7px; bottom: -3px; width: 13px; height: 13px; padding: 1px; border-radius: 3px; background: #fbfcfb; color: #1c4c3b; }
.ef-private-prospects { max-width: 700px; margin: 12px auto 28px; min-width: 0; }
.ef-preview-header { padding: 24px 28px; border-radius: 22px; background: linear-gradient(125deg,#1b4a38,#306b53); color: #fff; }
.ef-preview-header .ef-eyebrow { color: #edcb80; font-size: .7rem; }
#screen-event-first .ef-private-prospects h1 { margin: 8px 0 10px; font: 500 clamp(26px, 3vw, 36px)/1.15 var(--ef-serif); color: #fff; text-align: left; }
.ef-preview-header p { margin: 0; max-width: 480px; color: #e7eee9; font-size: .9375rem; line-height: 1.5; }
.ef-preview-featured { border: 1px solid #cbdad1; border-radius: 20px; background: #fff; overflow: hidden; }
/* One rail of full cards, swiped sideways — the events screen's pattern. */
.ef-preview-rail { display: flex; gap: 14px; margin-top: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ef-preview-rail::-webkit-scrollbar { display: none; }
.ef-preview-rail > .ef-preview-featured { scroll-snap-align: center; flex: 0 0 min(400px, 88%); min-width: 0; }
.ef-private-prospects .ef-event-dots { margin-top: 8px; }
.ef-preview-featured-body { display: grid; grid-template-columns: minmax(0,180px) minmax(0,1fr); gap: 26px; padding: 22px; align-items: center; }
.ef-preview-photo { position: relative; display: block; isolation: isolate; aspect-ratio: 4/5; border-radius: 12px; overflow: hidden; background: #e3efe9; }
.ef-preview-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.ef-preview-photo-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px; text-align: center; font-size: .75rem; color: #50665a; }
.ef-preview-photo-lock { position: absolute; z-index: 2; right: 8px; bottom: 8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #1b4a38; }
.ef-preview-label { color: #62736a; font-size: .6875rem; letter-spacing: .1em; font-weight: 800; text-transform: uppercase; }
#screen-event-first .ef-preview-summary h2 { font: 500 clamp(21px,2.5vw,29px)/1.2 var(--ef-serif); color: var(--ef-ink); margin: 9px 0; text-align: left; overflow-wrap: anywhere; }
.ef-preview-summary { min-width: 0; }
.ef-preview-area { margin: 0; color: #617368; font-size: .9375rem; overflow-wrap: anywhere; }
.ef-preview-summary dl { margin: 20px 0 0; padding-top: 15px; border-top: 1px solid var(--ef-line); }
.ef-preview-summary dt { color: #617368; font-size: .75rem; margin-bottom: 4px; }
.ef-preview-summary dd { margin: 0; font-size: .875rem; font-weight: 700; overflow-wrap: anywhere; }
.ef-preview-lockline { display: flex; align-items: center; gap: 8px; margin: 0; padding: 13px 22px; border-top: 1px solid var(--ef-line); color: #5c7064; font-size: .8125rem; line-height: 1.5; }
.ef-preview-lockline svg { flex: 0 0 16px; }
#screen-event-first .ef-private-prospects .ef-button { margin-top: 14px; font-size: .9375rem; line-height: 1.4; min-height: 50px; white-space: normal; }
.ef-private-prospects [hidden] { display: none !important; }
.ef-preview-status { display: grid; justify-items: center; margin-top: 18px; padding: 32px 20px; background: #fff; border: 1px solid var(--ef-line); border-radius: 20px; text-align: center; color: #50665a; }
.ef-preview-status p { font-size: .9375rem; line-height: 1.5; }
@media (max-width: 600px) {
  .ef-preview-header { padding: 20px; border-radius: 18px; }
  .ef-preview-featured-body { grid-template-columns: minmax(0,110px) minmax(0,1fr); gap: 15px; padding: 16px; }
  .ef-preview-summary dl { margin-top: 12px; padding-top: 10px; }
  .ef-preview-lockline { padding: 12px 16px; font-size: .75rem; }
}
@media (max-width: 767px) {
  .ef-private-prospects { margin-top: 42px; }
}
.ef-nav-badge { margin-left: auto; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; background: var(--ef-gold); color: #3d2a00; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.ef-live-room-inbox.is-focused { outline: 3px solid rgba(197,159,57,.52); outline-offset: 3px; }

/* Persistent account block. It takes the `margin-top: auto` so the identity row
   and the strapline sit together as one group at the bottom of the sidebar. */
.ef-account { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--ef-line); }
.ef-account-row { display: flex; align-items: center; gap: 11px; padding: 0 10px 12px; min-width: 0; }
.ef-account-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; color: var(--ef-teal-deep); background: var(--ef-teal-soft); font-size: 13px; font-weight: 800; }
.ef-account-id { min-width: 0; line-height: 1.25; }
.ef-account-id strong { display: block; font-size: 13.5px; color: var(--ef-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ef-account-id span { color: var(--ef-muted); font-size: 11px; }
.ef-account-logout { width: 100%; min-height: 42px; border: 1px solid var(--ef-line); border-radius: 14px; background: #fff; color: var(--ef-muted); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 700; cursor: pointer; }
.ef-account-logout:hover { border-color: rgba(179,38,30,.3); background: rgba(179,38,30,.05); color: var(--ef-danger); }
.ef-account-logout-icon { width: 16px; height: 16px; display: grid; place-items: center; }
/* Slim global controls: two icons, no pills, every width. */
.ef-topbar { position: fixed; z-index: 8990; top: max(13px, env(safe-area-inset-top)); right: 13px; display: flex; align-items: center; gap: 8px; }

.ef-topbar-btn { display: grid; place-items: center; width: 38px; height: 38px; padding: 9px; border: 1px solid rgba(226,232,227,.9); border-radius: 50%; background: rgba(255,255,255,.94); backdrop-filter: blur(18px); color: var(--ef-teal-deep); box-shadow: 0 8px 22px rgba(20,33,27,.12); cursor: pointer; }
.ef-topbar-btn:active { transform: scale(.94); }
.ef-topbar-chat { position: relative; color: #128c4b; }
.ef-chat-dot { position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px rgba(255,255,255,.95); animation: ef-chat-pulse 1.6s ease-in-out infinite; }
@keyframes ef-chat-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.72); } }
@media (prefers-reduced-motion: reduce) { .ef-chat-dot { animation: none; } }

.ef-sidebar-foot { padding: 14px 10px 0; color: var(--ef-muted); font-size: 11px; line-height: 1.5; }

.ef-main { min-width: 0; height: 100dvh; overflow-y: auto; padding: 58px clamp(22px, 4vw, 64px) 64px 22px; padding-left: clamp(22px, 4vw, 64px); }
.ef-content { width: min(100%, 1180px); margin: 0 auto; }
.ef-eyebrow { color: var(--ef-teal); font-size: 12px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; }
.ef-title { margin: 7px 0 0; font-family: var(--ef-serif); font-weight: 500; font-size: clamp(28px, 3vw, 42px); line-height: 1.08; letter-spacing: -.015em; color: var(--ef-ink); }
.ef-subtitle { max-width: 600px; margin: 9px 0 0; color: var(--ef-muted); font-size: 15px; line-height: 1.6; }
.ef-refresh { width: auto; border: 1px solid var(--ef-line); border-radius: 999px; background: #fff; color: var(--ef-teal-deep); padding: 9px 14px; font-weight: 700; cursor: pointer; }

.ef-card { background: var(--ef-card); border: 1px solid var(--ef-line); border-radius: 24px; box-shadow: 0 7px 24px rgba(20,33,27,.04); }
.ef-event-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(290px, .7fr); gap: 20px; }
.ef-result-band { margin-bottom: 20px; padding: 22px; border: 1px solid var(--ef-line); background: #fff; display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .55fr); gap: 24px; align-items: center; }
.ef-result-band h3 { margin: 7px 0 8px; font-family: var(--ef-serif); font-size: 27px; font-weight: 500; }
.ef-result-band p { margin: 10px 0 0; max-width: 650px; color: var(--ef-muted); font-size: 13px; line-height: 1.55; }
.ef-result-counts { display: flex; gap: 10px; flex-wrap: wrap; }
.ef-result-counts span { min-width: 130px; padding: 10px 12px; background: var(--ef-bg); color: var(--ef-muted); font-size: 12px; }
.ef-result-counts strong { display: block; color: var(--ef-teal-deep); font-size: 22px; }
.ef-result-offer { display: grid; gap: 8px; }
.ef-result-offer > strong { font-size: 22px; color: var(--ef-teal-deep); }
.ef-result-offer > span, .ef-result-offer label { color: var(--ef-muted); font-size: 11px; line-height: 1.45; }
.ef-result-offer label { display: flex; align-items: flex-start; gap: 7px; }
.ef-result-action { width: 100%; }
.ef-paypal-checkout { width: 100%; margin-top: 14px; text-align: left; }
.ef-paypal-cta { display: block; width: 100%; min-height: 48px; margin: 0; }
.ef-paypal-cta[disabled] { opacity: .5; pointer-events: none; }
.ef-paypal-status { min-height: 17px; margin-top: 7px; color: var(--ef-muted); font-size: 10.5px; line-height: 1.45; text-align: center; }
.ef-paypal-status.is-error { color: var(--ef-danger); }
.ef-event-hero { position: relative; overflow: hidden; min-height: 535px; padding: clamp(24px, 5vw, 52px); color: #fff; background: radial-gradient(circle at 85% 15%, rgba(230,177,61,.45), transparent 32%), radial-gradient(circle at 7% 92%, rgba(176,224,199,.18), transparent 35%), linear-gradient(145deg, #173e35 0%, #2a6b57 55%, #1f5546 100%); box-shadow: var(--ef-shadow); }
.ef-event-hero::after { content: ''; position: absolute; width: 330px; height: 330px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; right: -130px; bottom: -170px; box-shadow: 0 0 0 40px rgba(255,255,255,.025), 0 0 0 80px rgba(255,255,255,.02); }
.ef-event-hero.ef-shared-event-hero { min-height: 0; }
.ef-shared-event-hero .ef-event-meta { margin-top: 0; }
.ef-shared-event-hero .ef-feature-row { margin-bottom: 0; }
.ef-event-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.ef-status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(255,255,255,.11); backdrop-filter: blur(10px); font-size: 12px; font-weight: 800; }
.ef-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #8ee1bd; box-shadow: 0 0 0 5px rgba(142,225,189,.14); }
.ef-event-meta { margin-top: 38px; color: #d9eee5; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ef-event-title { max-width: 640px; margin: 13px 0 14px; color: #fff; font-family: var(--ef-serif); font-weight: 500; font-size: clamp(34px, 5vw, 62px); line-height: 1.02; letter-spacing: -.02em; }
.ef-event-copy { max-width: 580px; margin: 0; color: #deeee7; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.6; }
.ef-feature-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.ef-feature-chip { padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.1); color: #eef9f4; font-size: 12px; font-weight: 700; }
.ef-event-bottom { width: 100%; margin-top: auto; }
.ef-attendee-faces { display: flex; gap: 9px; width: 100%; margin: 4px 0 18px; padding: 2px 2px 9px; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.ef-attendee-face { width: 50px; height: 50px; flex: 0 0 50px; overflow: hidden; border: 2px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(255,255,255,.13); scroll-snap-align: start; }
.ef-attendee-face img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ef-gender-split { margin: -8px 0 16px; color: #d9eee5; font-size: 13px; font-weight: 700; opacity: .92; }

/* Specificity, not preference: `#screen-event-first button { font: inherit }`
   is (1,0,1) and this rule is (0,1,0), so the 800 below has never applied and
   every primary button has rendered at weight 400. The id prefix is what makes
   it take effect. See also the mobile nav. */
#screen-event-first .ef-button { font-weight: 800; }
.ef-button { width: 100%; min-height: 52px; border: 0; border-radius: 16px; padding: 12px 18px; background: var(--ef-teal); color: #fff; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: transform .15s ease, background .15s ease, opacity .15s ease; }
.ef-button:hover { transform: translateY(-1px); background: var(--ef-teal-deep); }
.ef-button:active { transform: translateY(0); }
.ef-button:disabled { cursor: not-allowed; opacity: .58; transform: none; }
.ef-button-gold { background: var(--ef-gold); color: #352500; box-shadow: 0 12px 28px rgba(230,177,61,.22); }
.ef-button-gold:hover { background: #f0bd4e; }
.ef-button-secondary { background: #fff; color: var(--ef-teal-deep); border: 1px solid var(--ef-line); }
.ef-button-danger { background: #fff; color: var(--ef-danger); border: 1px solid #efc6c3; }
.ef-event-hero .ef-button { min-height: 58px; font-size: 16px; }
.ef-button-sub { margin-top: 9px; width: 100%; text-align: center; color: #cfe4da; font-size: 11px; }
.ef-calendar-link { display: block; width: 100%; margin-top: 10px; color: #d9eee5; text-align: center; font-size: 12px; }

.ef-event-side { display: grid; align-content: start; gap: 14px; }
.ef-side-card { padding: 22px; }
.ef-side-label { color: var(--ef-muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ef-side-title { margin: 8px 0 5px; font-size: 19px; line-height: 1.25; }
.ef-side-copy { margin: 0; color: var(--ef-muted); font-size: 13px; line-height: 1.55; }
.ef-stat-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.ef-stat { padding: 12px; border-radius: 15px; background: var(--ef-bg); }
.ef-stat strong { display: block; font-size: 20px; color: var(--ef-teal-deep); }
.ef-stat span { color: var(--ef-muted); font-size: 11px; }
.ef-upcoming-list { display: grid; gap: 9px; margin-top: 13px; }
.ef-upcoming { width: 100%; border: 1px solid var(--ef-line); border-radius: 14px; background: #fff; padding: 12px; text-align: left; color: var(--ef-ink); cursor: pointer; }
.ef-upcoming[aria-current='true'] { border-color: var(--ef-teal); background: var(--ef-teal-soft); }
.ef-upcoming strong, .ef-upcoming span { display: block; }
.ef-upcoming span { margin-top: 3px; color: var(--ef-muted); font-size: 11px; }

.ef-network-toolbar { display: grid; grid-template-columns: 1fr auto; gap: 15px; align-items: end; margin-bottom: 18px; }
.ef-segments { display: inline-flex; max-width: 430px; padding: 4px; border-radius: 14px; background: #e8ece8; }
.ef-segment { min-height: 38px; border: 0; border-radius: 11px; padding: 0 16px; background: transparent; color: var(--ef-muted); font-weight: 700; cursor: pointer; }
.ef-segment[aria-selected='true'] { background: #fff; color: var(--ef-ink); box-shadow: 0 3px 12px rgba(20,33,27,.08); }
.ef-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ef-filter { width: auto; min-height: 42px; border: 1px solid var(--ef-line); border-radius: 999px; padding: 0 14px; background: #fff; color: var(--ef-ink); }
.ef-count { color: var(--ef-muted); font-size: 13px; font-weight: 600; }
.ef-profile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ef-profile-card { overflow: hidden; text-align: left; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.ef-profile-card:hover { transform: translateY(-3px); box-shadow: var(--ef-shadow); }
.ef-profile-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ef-teal-soft); }
.ef-profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ef-verified { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ef-teal); color: #fff; border: 2px solid #fff; font-size: 14px; font-weight: 900; }
.ef-profile-body { padding: 15px; }
.ef-profile-name { margin: 0; font-size: 18px; }
.ef-profile-meta { margin-top: 5px; color: var(--ef-muted); font-size: 12px; line-height: 1.45; min-height: 34px; }
.ef-readiness { display: inline-flex; margin-top: 10px; padding: 6px 9px; border-radius: 999px; background: var(--ef-gold-soft); color: #76540a; font-size: 10px; font-weight: 800; }

.ef-offer { margin: 14px 0; padding: 13px; border-radius: 14px; background: var(--ef-gold-soft); color: #684a0b; font-size: 12px; line-height: 1.5; }

.ef-list { display: grid; gap: 12px; max-width: 780px; }
.ef-connection { padding: 18px; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.ef-connection-profile-trigger { grid-column: 1 / 3; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 14px; text-align: left; cursor: pointer; }
.ef-connection-profile-trigger:focus-visible, .ef-history-profile-trigger:focus-visible, .ef-call-profile-trigger:focus-visible { outline: 3px solid var(--ef-gold); outline-offset: 4px; border-radius: 12px; }
.ef-connection img, .ef-connection-avatar { width: 58px; height: 58px; border-radius: 18px; object-fit: cover; background: var(--ef-teal-soft); }
.ef-connection-avatar { display: grid; place-items: center; color: var(--ef-teal); font-weight: 800; }
.ef-connection-title { display: block; margin: 0; font-size: 16px; }
.ef-connection-description { display: block; margin: 4px 0 0; color: var(--ef-muted); font-size: 12px; line-height: 1.45; }
.ef-connection .ef-button { width: auto; min-height: 42px; border-radius: 12px; font-size: 12px; }

/* Incoming introduction row.
   Its own card rather than a variant of .ef-connection: this is the one row
   that asks for money, and the generic card puts Accept and Decline side by
   side at equal weight. Here the decision is one full-width CTA with the price
   on it, and Decline is a quiet link — the shape of the decision, not a list
   item. Every other Diary state keeps the generic card. */
.ef-incoming-request { padding: 18px; display: grid; gap: 14px; }
.ef-incoming-head { padding: 0; border: 0; background: transparent; color: inherit; display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 14px; text-align: left; cursor: pointer; }
.ef-incoming-head:focus-visible { outline: 3px solid var(--ef-gold); outline-offset: 4px; border-radius: 12px; }
.ef-incoming-avatar { width: 58px; height: 58px; border-radius: 18px; background: var(--ef-teal-soft); color: var(--ef-teal); display: grid; place-items: center; overflow: hidden; }
.ef-incoming-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ef-incoming-avatar svg { width: 27px; height: 27px; }
.ef-incoming-copy { min-width: 0; display: grid; gap: 5px; justify-items: start; }
.ef-incoming-name { display: block; margin: 0; font-size: 19px; line-height: 1.2; }
.ef-incoming-sub { display: block; color: var(--ef-muted); font-size: 13px; line-height: 1.4; }
.ef-incoming-pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 5px 11px 5px 9px; border-radius: 999px; background: var(--ef-gold-soft); color: #7a5310; font-size: 12px; font-weight: 800; }
.ef-incoming-pill i { display: block; width: 14px; height: 14px; }
/* The CTA carries a price, so it says Accept and never Arrange: a priced
   button promising to book a call contradicts the modal's own footnote. */
.ef-incoming-cta { background: var(--ef-teal-deep); font-size: 16px; gap: 11px; }
/* The sentence never wraps: a two-line CTA reads as broken, and the chip is
   the part that can afford to shrink. */
.ef-incoming-cta > span:not([class]) { white-space: nowrap; }
.ef-incoming-cta-icon { display: block; width: 21px; height: 21px; flex: 0 0 auto; }
.ef-incoming-cta-price { padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: 14px; font-weight: 800; white-space: nowrap; }
/* Two classes deliberately: .ef-text-action is defined LATER in this file and
   carries text-decoration: underline, so a single-class rule here loses on
   source order and the underline silently survives. Specificity, not position. */
.ef-incoming-request .ef-incoming-decline { justify-self: center; font-size: 13px; text-decoration: none; color: var(--ef-muted); }
.ef-incoming-request .ef-incoming-decline:hover { text-decoration: underline; }
/* Nothing to accept, so the row carries no CTA and reserves no space for one. */
.ef-incoming-gone .ef-incoming-avatar { color: var(--ef-muted); background: var(--ef-line); }
.ef-incoming-gone .ef-incoming-name { font-size: 16px; }
.ef-inline-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.ef-slot-meter { display: grid; grid-template-columns: repeat(10, minmax(10px, 1fr)); gap: 4px; max-width: 260px; }
.ef-slot { height: 8px; border-radius: 999px; background: var(--ef-line); }
.ef-slot[data-used='true'] { background: var(--ef-gold); }

.ef-me-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, .55fr); gap: 18px; }
.ef-me-card { padding: 22px; }
.ef-setting { padding: 17px 0; border-bottom: 1px solid var(--ef-line); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.ef-setting:last-child { border-bottom: 0; }
.ef-setting strong, .ef-setting span { display: block; }
.ef-setting span { margin-top: 4px; color: var(--ef-muted); font-size: 12px; line-height: 1.45; }
.ef-switch { position: relative; width: 48px; height: 28px; flex: 0 0 auto; }
.ef-switch input { position: absolute; opacity: 0; }
.ef-switch-track { position: absolute; inset: 0; border-radius: 999px; background: #cdd5cf; transition: background .2s ease; cursor: pointer; }
.ef-switch-track::after { content: ''; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: transform .2s ease; }
.ef-switch input:checked + .ef-switch-track { background: var(--ef-teal); }
.ef-switch input:checked + .ef-switch-track::after { transform: translateX(20px); }
.ef-member-card { padding: 26px; background: linear-gradient(145deg, #183e34, var(--ef-teal)); color: #fff; }
.ef-member-card h3 { margin: 10px 0 4px; color: #fff; font-size: 22px; }
.ef-member-card p { color: #d9ece4; font-size: 12px; line-height: 1.5; }

.ef-empty, .ef-error { padding: 34px 22px; border: 1px dashed var(--ef-line); border-radius: 20px; background: rgba(255,255,255,.65); color: var(--ef-muted); text-align: center; }
.ef-error { border-style: solid; border-color: #efc6c3; color: var(--ef-danger); background: #fff9f8; }
.ef-banner { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; padding:16px 18px; border:1px solid rgba(197,159,57,.38); border-radius:18px; background:#fff9e7; color:var(--ef-ink); }
.ef-banner strong, .ef-banner span { display:block; }
.ef-banner span { margin-top:4px; color:var(--ef-muted); font-size:.88rem; }
.ef-banner .ef-button { width:auto; flex:0 0 auto; }
.ef-skeleton { min-height: 160px; border-radius: 20px; background: linear-gradient(90deg, #e9eeea 25%, #f7f9f7 50%, #e9eeea 75%); background-size: 200% 100%; animation: ef-shimmer 1.25s infinite; }
@keyframes ef-shimmer { to { background-position: -200% 0; } }

.ef-modal-backdrop { position: fixed; inset: 0; z-index: 11000; background: rgba(12,28,22,.64); display: grid; place-items: center; padding: 18px; }
.ef-modal { width: min(100%, 580px); max-height: min(88dvh, 820px); overflow-y: auto; border-radius: 24px; background: #fff; box-shadow: 0 28px 80px rgba(0,0,0,.25); }
.ef-modal-compact { width: min(100%, 430px); }
.ef-diary-profile-modal { position: relative; width: min(100%, 680px); max-height: min(94dvh, 920px); overflow: hidden; display: flex; flex-direction: column; }
.ef-diary-profile-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ef-diary-profile-header { padding: 24px 62px 0 24px; }
.ef-diary-profile-gallery { padding: 0 24px; }
.ef-diary-profile-details { padding: 8px 24px 26px; }
.ef-diary-profile-close { z-index: 8; }
.ef-diary-profile-actions { position: sticky; z-index: 7; bottom: 0; flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ef-line); background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }
.ef-diary-profile-actions .ef-button { flex: 1; margin: 0; }
.ef-diary-profile-actions .ef-text-action { flex: 0 0 auto; }

/* Curated prospect card: one person, full attention. */
.ef-reasons { display: flex; flex-wrap: wrap; gap: 7px; }
.ef-reason { background: var(--ef-teal-soft); color: var(--ef-teal-deep); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; }

/* Locked tease: a shape, not a person — the payload carries no data. */

.ef-history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.ef-history-card { display: flex; gap: 11px; align-items: center; padding: 11px; }
.ef-history-photo { width: 46px; height: 46px; border-radius: 14px; overflow: hidden; flex: 0 0 auto; background: var(--ef-teal-soft); }
.ef-history-photo img { width: 100%; height: 100%; object-fit: cover; }
.ef-history-card strong { display: block; font-size: 13.5px; }
.ef-history-card span { color: var(--ef-muted); font-size: 11.5px; }

/* Locked directory preview: the paid layout, blurred and inert. The cards hold no
   data — the server sends shapes, not people — so this is presentation only and
   there is nothing here for a determined viewer to recover. */
.ef-modal-hero { position: relative; aspect-ratio: 16 / 10; background: var(--ef-teal-soft); overflow: hidden; }
.ef-modal-hero img { width: 100%; height: 100%; object-fit: cover; }
.ef-modal-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(20,33,27,.78); color: #fff; cursor: pointer; }
.ef-modal-body { padding: 24px; }
.ef-modal-title { margin: 0; font-size: 25px; }
.ef-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 17px 0; }
.ef-detail { padding: 12px; border-radius: 14px; background: var(--ef-bg); }
.ef-detail small { display: block; color: var(--ef-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.ef-detail strong { display: block; margin-top: 4px; font-size: 13px; }
.ef-safety-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.ef-text-action { border: 0; background: transparent; color: var(--ef-muted); padding: 5px; font-size: 12px; text-decoration: underline; cursor: pointer; }
.ef-field { width: 100%; min-height: 48px; border: 1px solid var(--ef-line); border-radius: 13px; padding: 10px 12px; color: var(--ef-ink); background: #fff; }
.ef-scheduled-proposal { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--ef-line); border-radius: 13px; background: #fbfdfb; line-height: 1.45; }
.ef-scheduled-proposal b { display: block; color: var(--ef-green); }
.ef-scheduled-proposal p { margin: 7px 0 0; color: var(--ef-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.ef-toast-action { margin-left: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.55); background: transparent; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.ef-toast { position: fixed; z-index: 12000; left: 50%; bottom: 26px; transform: translateX(-50%); max-width: min(90vw, 480px); padding: 12px 17px; border-radius: 999px; background: var(--ef-ink); color: #fff; font-size: 13px; font-weight: 700; box-shadow: var(--ef-shadow); }

.ef-mobile-nav { display: none; }

/* ============ The Matchmaker's Letter components ============ */
/* The letter column: one place owns the reading width. */
.ef-column { max-width: 560px; }
.ef-letter { background: var(--ef-paper); border: 1px solid var(--ef-paper-edge); border-radius: 22px; padding: 22px 20px 20px; box-shadow: 0 10px 30px rgba(31,85,70,.08); }
.ef-salaam { font-family: var(--ef-serif); font-style: italic; font-size: 15px; color: var(--ef-teal-deep); }
.ef-letter-title { font-family: var(--ef-serif); font-weight: 500; font-size: clamp(26px, 3.4vw, 32px); line-height: 1.12; letter-spacing: -.01em; margin: 8px 0 2px; text-wrap: balance; }
.ef-flourish { width: 46px; height: 2px; background: var(--ef-gold); border-radius: 2px; margin: 12px 0; }

.ef-portrait { position: relative; border-radius: 18px; overflow: hidden; margin: 14px 0 4px; aspect-ratio: 4 / 4.6; background: linear-gradient(160deg, #315f4f 0%, var(--ef-teal-deep) 60%); }
.ef-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ef-portrait .ef-mono { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--ef-serif); font-style: italic; font-size: 90px; color: rgba(250,247,240,.35); }
.ef-portrait-veil { position: absolute; inset: auto 0 0 0; padding: 40px 14px 11px; color: var(--ef-paper); background: linear-gradient(180deg, transparent, rgba(16,32,26,.74)); display: block; font-size: 13px; }
.ef-portrait-veil .ef-veil-name { font-family: var(--ef-serif); font-weight: 500; font-size: 19px; line-height: 1.15; display: block; }
.ef-veil-supporting { display: block; margin-top: 4px; color: rgba(250,247,240,.82); font-size: 11px; line-height: 1.35; }
.ef-verify-pill { display: inline-flex; gap: 5px; align-items: center; font-size: 11px; font-weight: 700; background: rgba(250,247,240,.16); border: 1px solid rgba(250,247,240,.35); padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(4px); white-space: nowrap; }

.ef-prospect-gallery { overflow: hidden; outline: none; }
.ef-prospect-gallery:focus-visible { box-shadow: 0 0 0 3px rgba(31,120,91,.28); }
.ef-gallery-track { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.ef-gallery-track::-webkit-scrollbar { display: none; }
.ef-gallery-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; padding: 0; border: 0; background: #dce8e1; scroll-snap-align: start; cursor: zoom-in; overflow: hidden; }
.ef-prospect-gallery .ef-gallery-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ef-gallery-slide.is-error::after { content: 'Photo unavailable'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ef-muted); font-size: 13px; font-weight: 700; background: var(--ef-teal-soft); }
.ef-prospect-gallery .ef-portrait-veil { z-index: 3; pointer-events: none; }
.ef-gallery-arrow { position: absolute; z-index: 4; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; padding: 10px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(17,35,28,.68); color: #fff; backdrop-filter: blur(8px); cursor: pointer; transform: translateY(-50%); }
.ef-gallery-arrow:disabled { opacity: .25; cursor: default; }
.ef-gallery-prev { left: 12px; }
.ef-gallery-next { right: 12px; }
.ef-gallery-count { position: absolute; z-index: 4; top: 12px; right: 12px; padding: 5px 9px; border-radius: 999px; background: rgba(17,35,28,.72); color: #fff; font-size: 11px; font-weight: 800; backdrop-filter: blur(8px); }
.ef-gallery-dots { display: flex; justify-content: center; gap: 7px; min-height: 20px; padding-top: 9px; }
.ef-gallery-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #b9c7bf; cursor: pointer; transition: width .18s ease, background .18s ease; }
.ef-gallery-dots button[aria-current="true"] { width: 20px; border-radius: 999px; background: var(--ef-teal); }

.ef-photo-viewer { position: fixed; inset: 0; z-index: 13000; display: grid; place-items: center; background: rgba(5,10,8,.96); }
.ef-photo-viewer-stage { position: relative; width: 100%; height: 100%; display: grid; place-items: center; touch-action: pan-y; }
.ef-photo-viewer-stage > img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ef-photo-viewer-close, .ef-photo-viewer-arrow { position: absolute; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 11px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(15,25,20,.72); color: #fff; cursor: pointer; }
.ef-photo-viewer-close { top: max(16px, env(safe-area-inset-top)); right: 16px; }
.ef-photo-viewer-arrow { top: 50%; transform: translateY(-50%); }
.ef-photo-viewer-prev { left: 16px; }
.ef-photo-viewer-next { right: 16px; }
.ef-photo-viewer-count { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 7px 12px; border-radius: 999px; background: rgba(15,25,20,.72); color: #fff; font-size: 12px; font-weight: 800; }

.ef-matching-update { width: min(100%, 560px); margin: 20px auto 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--ef-gold); display: grid; grid-template-columns: 34px 1fr; align-items: start; gap: 10px; }
.ef-matching-update-mark { width: 30px; height: 30px; display: grid; place-items: center; color: var(--ef-teal); font-size: 20px; }
.ef-matching-update-mark span { width: 16px; height: 16px; border: 2px solid #c9d8d0; border-top-color: var(--ef-teal); border-radius: 50%; animation: ef-summary-spin .8s linear infinite; }
.ef-matching-update p { margin: 7px 0 0; color: var(--ef-ink); font-family: var(--ef-serif); font-size: 15px; line-height: 1.5; }
@keyframes ef-summary-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ef-gallery-track { scroll-behavior: auto; } .ef-gallery-dots button { transition: none; } .ef-matching-update-mark span { animation: none; } }

.ef-storyline { display: grid; gap: 9px; margin: 12px 0 2px; }
.ef-storyline p { margin: 0; font-size: 14.5px; line-height: 1.55; padding-left: 18px; position: relative; }
.ef-storyline p::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--ef-gold); }
.ef-profile-intent { display: flex; gap: 13px; margin: 2px 0 15px; padding: 18px; border: 1px solid rgba(31,120,91,.2); border-radius: 18px; background: linear-gradient(135deg, #edf5f0, #faf7f0); box-shadow: 0 8px 24px rgba(20,61,48,.06); }
.ef-profile-intent-mark { flex: 0 0 auto; color: var(--ef-gold); font-family: var(--ef-serif); font-size: 46px; line-height: .8; }
.ef-profile-intent h3 { margin: 0 0 7px; color: var(--ef-teal-deep); font-family: var(--ef-serif); font-size: 18px; font-weight: 600; }
.ef-profile-intent blockquote { margin: 0; color: var(--ef-teal-deep); font-family: var(--ef-serif); font-size: 16px; font-style: italic; font-weight: 500; line-height: 1.55; overflow-wrap: anywhere; }
.ef-compat { margin: 2px 0 15px; padding: 18px; border: 1px solid rgba(183,134,42,.32); border-radius: 18px; background: linear-gradient(135deg, #fbf6ea, #faf7f0); box-shadow: 0 8px 24px rgba(20,61,48,.06); }
.ef-compat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ef-compat-head h3 { margin: 0; color: var(--ef-teal-deep); font-family: var(--ef-serif); font-size: 18px; font-weight: 600; }
.ef-compat-verdict { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; background: rgba(31,120,91,.12); color: var(--ef-teal-deep); }
.ef-compat-verdict--strong { background: var(--ef-gold); color: #fff; }
.ef-compat-verdict--worth_a_look { background: rgba(20,33,27,.08); color: var(--ef-ink); }
.ef-compat-summary { margin: 0 0 10px; color: var(--ef-teal-deep); font-family: var(--ef-serif); font-size: 16px; font-style: italic; font-weight: 500; line-height: 1.55; overflow-wrap: anywhere; }
.ef-compat-reasons { margin: 0 0 10px; padding: 0 0 0 18px; color: var(--ef-ink); font-size: 14px; line-height: 1.5; }
.ef-compat-reasons li { margin: 4px 0; overflow-wrap: anywhere; }
.ef-compat-caution { margin: 0 0 10px; padding: 10px 12px; border-left: 3px solid var(--ef-gold); border-radius: 0 10px 10px 0; background: rgba(255,255,255,.7); color: var(--ef-ink); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ef-compat-caution b { display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--ef-teal-deep); }
.ef-compat-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.ef-compat-lines div { padding: 9px 11px; border: 1px solid rgba(31,120,91,.12); border-radius: 12px; background: rgba(255,255,255,.75); }
.ef-compat-lines dt { margin: 0 0 3px; font-size: 10.5px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--ef-teal-deep); }
.ef-compat-lines dd { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ef-ink); overflow-wrap: anywhere; }
.ef-compat-foot { margin: 0; color: var(--ef-muted); font-size: 12px; line-height: 1.45; }
@media (max-width: 420px) { .ef-compat-lines { grid-template-columns: 1fr; } }
.ef-profile-fit { margin: 2px 0 15px; padding: 18px; border: 1px solid rgba(31,120,91,.22); border-radius: 18px; background: linear-gradient(145deg, #f3f8f2, #fbfaf5); box-shadow: 0 8px 24px rgba(20,61,48,.06); }
.ef-profile-fit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ef-profile-fit-kicker { margin: 0 0 4px; color: var(--ef-muted); font-size: 10.5px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.ef-profile-fit-head h3 { margin: 0; color: var(--ef-teal-deep); font-family: var(--ef-serif); font-size: 21px; font-weight: 600; line-height: 1.2; }
.ef-profile-fit-coverage { padding: 5px 9px; border-radius: 999px; background: rgba(31,120,91,.1); color: var(--ef-teal-deep); font-size: 11px; font-weight: 750; white-space: nowrap; }
.ef-profile-fit-summary { margin: 10px 0; color: var(--ef-teal-deep); font-family: var(--ef-serif); font-size: 16px; font-style: italic; line-height: 1.5; overflow-wrap: anywhere; }
.ef-profile-fit-reasons { margin: 0 0 10px; padding: 0 0 0 18px; color: var(--ef-ink); font-size: 14px; line-height: 1.5; }
.ef-profile-fit-reasons li { margin: 4px 0; overflow-wrap: anywhere; }
.ef-profile-fit-difference { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--ef-gold); border-radius: 0 10px 10px 0; background: rgba(255,255,255,.78); color: var(--ef-ink); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ef-profile-fit-difference b { display: block; margin-bottom: 2px; color: var(--ef-teal-deep); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.ef-profile-fit-details { border-top: 1px solid rgba(31,120,91,.15); }
.ef-profile-fit-details summary { padding: 12px 0 2px; color: var(--ef-teal-deep); cursor: pointer; font-size: 14px; font-weight: 800; }
.ef-profile-fit-details summary:focus-visible { outline: 3px solid rgba(183,134,42,.55); outline-offset: 3px; border-radius: 4px; }
.ef-profile-fit-table { display: grid; gap: 8px; margin-top: 10px; }
.ef-profile-fit-row { display: grid; grid-template-columns: minmax(110px, .9fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 10px; border: 1px solid rgba(31,120,91,.12); border-radius: 12px; background: rgba(255,255,255,.75); color: var(--ef-ink); font-size: 13px; line-height: 1.4; }
.ef-profile-fit-topic { color: var(--ef-teal-deep); font-weight: 800; }
.ef-profile-fit-person { display: block; margin-bottom: 2px; color: var(--ef-muted); font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.ef-profile-fit-explanation { grid-column: 2 / -1; margin: 2px 0 0; color: var(--ef-muted); font-size: 12px; overflow-wrap: anywhere; }
.ef-profile-fit-foot { margin: 12px 0 0; color: var(--ef-muted); font-size: 12px; line-height: 1.45; }
.ef-profile-fit-question { margin: -3px 0 15px; padding: 13px 14px 14px; border: 1px solid rgba(31,120,91,.16); border-radius: 12px; background: #f7f8f1; }
.ef-profile-fit-question-head { display: flex; align-items: center; gap: 9px; }
.ef-profile-fit-question-mark { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; background: #e4eedb; color: var(--ef-teal-deep); font-size: 15px; }
.ef-profile-fit-question .ef-profile-fit-kicker { margin: 0; }
.ef-profile-fit-question-note { margin: 2px 0 0; color: var(--ef-muted); font-size: 10px; line-height: 1.4; }
.ef-profile-fit-question-text { margin: 9px 0 0; color: var(--ef-teal-deep); font: italic 16px/1.45 var(--ef-serif); }
.ef-profile-availability,.ef-profile-own-words,.ef-profile-matter,.ef-profile-thoughtful { margin: 2px 0 15px; padding: 18px; border: 1px solid rgba(31,120,91,.18); border-radius: 18px; background: #fbfaf5; box-shadow: 0 8px 24px rgba(20,61,48,.05); }
.ef-profile-availability { background: linear-gradient(135deg, #edf5f0, #faf7f0); }
.ef-profile-availability h3,.ef-profile-own-words h3,.ef-profile-matter h3,.ef-profile-thoughtful h3 { margin: 0 0 7px; color: var(--ef-teal-deep); font-family: var(--ef-serif); font-size: 20px; font-weight: 600; line-height: 1.25; }
.ef-profile-availability p:not(.ef-profile-fit-kicker) { margin: 0; color: var(--ef-muted); font-size: 13px; line-height: 1.45; }
.ef-profile-availability-slots { display: grid; gap: 8px; margin-top: 13px; }
.ef-profile-availability-slot { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 1px solid rgba(31,120,91,.18); border-radius: 12px; background: rgba(255,255,255,.78); color: var(--ef-teal-deep); text-align: left; cursor: pointer; }
.ef-profile-availability-slot:hover,.ef-profile-availability-slot:focus-visible { border-color: var(--ef-teal); outline: 3px solid rgba(183,134,42,.28); outline-offset: 2px; }
.ef-profile-availability-slot span:first-child { color: var(--ef-muted); font-size: 12px; }
.ef-profile-availability-slot strong { font-size: 13px; }
.ef-profile-own-words blockquote { margin: 0; color: var(--ef-teal-deep); font-family: var(--ef-serif); font-size: 21px; font-style: italic; line-height: 1.45; overflow-wrap: anywhere; }
.ef-profile-matter { background: #fffdfa; }
.ef-profile-matter-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 13px; }
.ef-profile-matter-grid > div { min-width: 0; padding-top: 10px; border-top: 1px solid rgba(31,120,91,.12); }
.ef-profile-matter-grid span,.ef-profile-more h4 { display: block !important; color: var(--ef-muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; line-height: 1.35; text-transform: uppercase; }
.ef-profile-matter-grid strong { display: block !important; min-width: 0; margin-top: 4px; color: var(--ef-ink); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.ef-profile-thoughtful { border-color: rgba(197,159,57,.28); background: linear-gradient(135deg, #fff8e5, #faf4e9); }
.ef-profile-thoughtful p:not(.ef-profile-fit-kicker) { margin: 0; color: var(--ef-ink); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.ef-profile-thoughtful small { display: block; margin-top: 9px; color: var(--ef-muted); font-size: 12px; }
.ef-profile-more { margin: 2px 0 15px; padding: 0 18px; border: 1px solid rgba(31,120,91,.14); border-radius: 18px; background: #fffdfa; }
.ef-profile-more summary { padding: 16px 0; color: var(--ef-teal-deep); cursor: pointer; font-size: 15px; font-weight: 800; }
.ef-profile-more summary:focus-visible { outline: 3px solid rgba(183,134,42,.55); outline-offset: 3px; border-radius: 4px; }
.ef-profile-more-grid { display: grid; gap: 14px; padding: 0 0 17px; }
.ef-profile-more h4 { margin: 0 0 5px; }
.ef-profile-more p { margin: 0; color: var(--ef-ink); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
@media (max-width: 520px) { .ef-profile-fit-row { grid-template-columns: 1fr 1fr; } .ef-profile-fit-topic { grid-column: 1 / -1; } .ef-profile-fit-explanation { grid-column: 1 / -1; } }
@media (max-width: 380px) { .ef-profile-matter-grid { grid-template-columns: 1fr; } }
.ef-profile-tags { margin: 15px 0 2px; padding: 13px 14px; border: 1px solid rgba(31,120,91,.16); border-radius: 16px; background: linear-gradient(135deg, rgba(231,241,235,.72), rgba(250,247,240,.86)); }
.ef-profile-tags-label { color: var(--ef-teal-deep); font-size: 10px; font-weight: 850; letter-spacing: .095em; line-height: 1.3; text-transform: uppercase; }
.ef-profile-tags-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.ef-profile-tag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 10px; border: 1px solid rgba(31,120,91,.18); border-radius: 999px; background: rgba(255,255,255,.9); color: var(--ef-ink); font-size: 11.5px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; box-shadow: 0 2px 8px rgba(20,33,27,.04); }
.ef-profile-tag::before { content: ''; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--ef-gold); }
.ef-profile-tags--compact { margin: 9px 0 0; padding: 0; border: 0; background: transparent; }
.ef-profile-tags--compact .ef-profile-tags-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ef-profile-tags--compact .ef-profile-tags-list { margin-top: 0; gap: 5px; }
.ef-profile-tags--compact .ef-profile-tag { padding: 4px 7px; font-size: 10px; }
.ef-profile-sections { display: grid; gap: 13px; margin-top: 15px; }
.ef-profile-section { padding: 15px; border: 1px solid rgba(31,120,91,.12); border-radius: 18px; background: rgba(255,255,255,.7); }
.ef-profile-section h3 { margin: 0 0 11px; color: var(--ef-teal-deep); font-family: var(--ef-serif); font-size: 18px; font-weight: 600; }
.ef-profile-section .ef-detail-grid { margin: 0; }
.ef-profile-section .ef-detail { min-width: 0; background: var(--ef-bg); }
.ef-profile-section .ef-detail strong { overflow-wrap: anywhere; }
.ef-profile-work { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 13px 14px; border: 1px solid rgba(197,159,57,.28); border-radius: 15px; background: linear-gradient(135deg, #fff9e9, #faf7f0); }
.ef-profile-work-icon { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; padding: 8px; border-radius: 11px; background: var(--ef-teal); color: #fff; }
.ef-profile-work small { display: block; color: #8b6b1c; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ef-profile-work strong { display: block; margin-top: 2px; color: var(--ef-ink); font-size: 14px; overflow-wrap: anywhere; }
.ef-profile-hidden-fact { display: flex; align-items: flex-start; gap: 10px; margin: -3px 0 15px; padding: 12px 14px; border: 1px solid rgba(197,159,57,.28); border-radius: 14px; background: linear-gradient(135deg, #fff8e5, #faf4e9); }
.ef-profile-hidden-fact-mark { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: var(--ef-gold); color: #493b14; font-size: 15px; }
.ef-profile-hidden-fact-kicker { margin: 1px 0 0; color: #8b6b1c; font-size: 10px; font-weight: 850; letter-spacing: .08em; line-height: 1.35; text-transform: uppercase; }
.ef-profile-hidden-fact-text { margin: 4px 0 0; color: var(--ef-ink); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.ef-saved-profile-details { grid-column: 1 / -1; width: 100%; border-top: 1px solid var(--ef-line); }
.ef-saved-profile-details summary { padding: 11px 0 3px; color: var(--ef-teal-deep); font-size: 12px; font-weight: 800; cursor: pointer; }
.ef-saved-profile-details-body { padding-top: 5px; }
.ef-letter-quote { font-family: var(--ef-serif); font-style: italic; font-size: 14px; color: var(--ef-teal-deep); margin: 14px 0 0; }

/* The decide bar pins ABOVE the fixed chrome, not behind it. It used to be
   `bottom: 0; z-index: 5`, which parked it under the membership CTA (8994)
   and the nav (8995) — the sticky behaviour was never actually visible on a
   phone. .ef-main has overflow but no z-index/transform/opacity, so it opens
   no stacking context and the bar competes directly with the fixed chrome:
   8993 puts it above all page content and still below both, which is what
   keeps the chrome on top during iOS rubber-band overscroll.

   `bottom: 0` is deliberate and is NOT the old value doing nothing. A sticky
   offset is measured against the scrollport REDUCED BY the scroll container's
   padding, and .ef-main's padding-bottom is exactly --ef-bottom-chrome — so
   zero already parks the bar precisely on top of the chrome. Repeating the
   variable here double-counts it and floats the bar a whole chrome-height too
   high, over the photo. The fix for the original bug was making that padding
   accurate (and raising z-index), not adding an inset. */
/* Chips summarise the prospect ON the photo (the mockup's lead), while the
   full detail moves below the fold into .ef-prospect-more. */
.ef-veil-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
/* Sized to fit two chips per row at 375px. These sit ON the photo, so they are
   secondary metadata — the picture is the thing being sold. min-width:0 plus
   ellipsis stops one long profession string from claiming a whole row. */
.ef-veil-chip { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; padding: 3px 8px; border-radius: 999px; background: rgba(250,247,240,.9); color: var(--ef-ink); font-size: 10px; font-weight: 700; line-height: 1.35; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 5px rgba(20,33,27,.16); }
.ef-prospect-more { margin-top: 12px; }
.ef-deck-progress { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin-top: 10px; color: var(--ef-muted); font-size: 12px; }
.ef-deck-progress strong { color: var(--ef-ink); }
.ef-deck-progress .ef-text-action { padding: 0; min-height: 0; font-size: inherit; vertical-align: baseline; }

.ef-decide { position: sticky; bottom: 0; z-index: 8993; padding: 10px 0 var(--ef-decide-tail); background: linear-gradient(180deg, var(--ef-bg-0) 0, var(--ef-bg) 14px); }
.ef-decide-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
/* Each caption now lives inside the button it explains. They used to sit in a
   detached .ef-decide-micro row, which read as noise under two bare buttons. */
.ef-decide-row .ef-button { margin: 0; flex-direction: column; gap: 3px; min-height: 66px; padding: 10px 12px; line-height: 1.2; }
/* Once the captions have done their job the buttons lose the row they needed
   for them. 44px keeps a comfortable touch target. */
.ef-decide-slim .ef-decide-row .ef-button { min-height: 44px; gap: 0; padding: 8px 12px; }
.ef-decide-row .ef-button b { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; }
.ef-decide-row .ef-button small { font-size: 10.5px; font-weight: 600; line-height: 1.3; text-align: center; opacity: .8; }
.ef-decide-icon { flex: 0 0 auto; width: 17px; height: 17px; display: grid; place-items: center; }
.ef-button-meet { background: var(--ef-teal-deep); color: #fff; box-shadow: 0 12px 28px rgba(31,85,70,.22); }
.ef-button-meet:hover { background: #17453a; }
/* .ef-button:hover (0,2,0) out-specifies .ef-button-secondary (0,1,0) and sets
   --ef-teal-deep. Harmless while Meet was gold; now that Meet IS teal-deep, a
   hovered Pass would be indistinguishable from Meet without this. */
.ef-button-secondary:hover { background: var(--ef-teal-soft); color: var(--ef-teal-deep); }

/* The dock (25 Sept 2026). Pass and Request shipped as two identical buttons
   with Pass on the left, under the resting thumb; when two actions look equally
   intended people take the cheaper one, and 21 accounts stopped after ONE free
   request against 12 that spent both. The ask becomes the wide target and Pass
   becomes a round one beside it — still one tap, still collecting a reason,
   because passing is how the deck learns and a marriage app must never make no
   awkward. Geometry is pinned by send-first-dock.spec.ts. */
.ef-decide-dock { display: flex; align-items: center; gap: 12px; }
/* `.ef-button` is width:100%, so two of them in a flex row push the second one
   off the screen — the filter footer shipped exactly that bug on 24 Sept. Any
   row reusing .ef-button needs this reset. */
.ef-decide-dock .ef-button { width: auto; flex: 1 1 0; margin: 0; min-height: 56px; border-radius: 999px; font-size: 15.5px; gap: 9px; }
.ef-decide-pass { width: 56px; height: 56px; flex: 0 0 56px; padding: 0; border-radius: 50%; background: var(--ef-card); border: 1px solid var(--ef-line); color: #8a978f; display: grid; place-items: center; cursor: pointer; transition: background .15s ease, color .15s ease, transform .15s ease; }
.ef-decide-pass:hover { background: var(--ef-teal-soft); color: var(--ef-teal-deep); transform: translateY(-1px); }
.ef-decide-pass:active { transform: translateY(0); }
.ef-decide-pass svg { width: 21px; height: 21px; }
/* The counter moves ABOVE the dock: it tells somebody where they stand before
   they spend a request, not after. */
.ef-decide .ef-send-trial { margin: 0 0 9px; }

.ef-ringrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ef-ring { width: 44px; height: 44px; position: relative; flex: 0 0 auto; }
.ef-ring svg { transform: rotate(-90deg); display: block; }
.ef-ring-label { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: var(--ef-teal-deep); }
.ef-ringrow small { font-size: 12.5px; color: var(--ef-muted); line-height: 1.4; }
.ef-ringrow small strong { color: var(--ef-ink); }

.ef-bigring { display: grid; place-items: center; padding: 20px 0 4px; }
.ef-bigring-wrap { position: relative; width: 168px; height: 168px; }
.ef-bigring-wrap svg { transform: rotate(-90deg); display: block; }
.ef-bigring-label { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ef-bigring-label b { font-family: var(--ef-serif); font-weight: 500; font-size: 28px; display: block; }
.ef-bigring-label span { font-size: 11px; color: var(--ef-muted); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }

.ef-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.ef-stat-tile { background: var(--ef-card); border: 1px solid var(--ef-line); border-radius: 16px; padding: 13px 8px; text-align: center; }
.ef-stat-tile b { font-family: var(--ef-serif); font-weight: 500; font-size: 22px; display: block; }
.ef-stat-tile span { font-size: 10px; color: var(--ef-muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.ef-day-head { font-family: var(--ef-serif); font-size: 17px; margin: 18px 4px 8px; display: flex; gap: 8px; align-items: baseline; }
.ef-day-head small { font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--ef-muted); font-weight: 600; }
.ef-call-card { background: var(--ef-teal-deep); color: #f2ede1; border-radius: 18px; padding: 15px 15px 13px; margin-bottom: 8px; box-shadow: 0 12px 30px rgba(31,85,70,.28); }
/* Arranged calls keep their established portrait and compact dark-card layout;
   the locked-interest redesign below deliberately does not restyle them. */
.ef-call-profile-trigger { width: 100%; margin: 0 0 10px; padding: 0; border: 0; background: transparent; color: inherit; display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 13px; align-items: center; text-align: left; cursor: pointer; }
.ef-call-copy { min-width: 0; }
.ef-call-photo { display: block; width: 82px; height: 98px; overflow: hidden; border-radius: 18px; background: rgba(242,237,225,.14); }
.ef-call-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ef-call-photo-fallback { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--ef-serif); font-size: 30px; color: rgba(242,237,225,.85); }
.ef-call-profile-trigger strong { display: block; font-family: var(--ef-serif); font-weight: 500; font-size: 21px; margin: 4px 0 2px; }
/* Was `> span:last-child`, which silently stopped matching once the copy was
   wrapped in its own element. Named explicitly so it cannot break again. */
.ef-call-sub { display: block; font-size: 12.5px; color: rgba(242,237,225,.75); }
.ef-call-when { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--ef-gold); }
.ef-call-card h4 { font-family: var(--ef-serif); font-weight: 500; font-size: 21px; margin: 4px 0 2px; }
.ef-call-card p { margin: 0 0 10px; font-size: 12.5px; color: rgba(242,237,225,.75); }
.ef-call-card .ef-button { margin: 0; }
.ef-ghost-row { border: 1.5px dashed var(--ef-line); background: rgba(255,255,255,.55); border-radius: 16px; padding: 12px 14px; margin-bottom: 8px; font-size: 12.5px; color: var(--ef-muted); display: flex; gap: 10px; align-items: center; }
.ef-ghost-row .ef-ghost-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ef-gold); flex: 0 0 auto; }
.ef-wait-badge { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--ef-gold-soft); color: #8a6414; white-space: nowrap; }
.ef-diary-waiting { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.ef-diary-waiting .ef-history-profile-trigger { grid-column: 1; grid-row: 1; }
.ef-diary-waiting .ef-wait-badge { grid-column: 2; grid-row: 1; align-self: center; }
.ef-diary-waiting .ef-scheduled-proposal,
.ef-diary-waiting .ef-inline-actions { grid-column: 1 / -1; }
.ef-history-profile-trigger { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer; }
.ef-history-profile-trigger > span:last-child { min-width: 0; }

.ef-frost { position: relative; }
.ef-frost-glass { position: absolute; inset: 0; border-radius: 22px; backdrop-filter: blur(7px); background: rgba(250,247,240,.24); display: grid; place-items: end center; padding: 16px; }
.ef-frost-pill { background: var(--ef-teal-deep); color: #f6efe2; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 8px 14px; display: inline-flex; gap: 7px; align-items: center; }
.ef-steps-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 12px 0; }
.ef-step-tile { background: var(--ef-card); border: 1px solid var(--ef-line); border-radius: 15px; padding: 12px 9px; text-align: center; }
.ef-step-tile .ef-step-n { font-family: var(--ef-serif); font-style: italic; color: #b8862a; font-size: 17px; }
.ef-step-tile b { display: block; font-size: 11.5px; margin-top: 3px; }
.ef-step-tile span { font-size: 10px; color: var(--ef-muted); line-height: 1.35; display: block; margin-top: 2px; }
.ef-proof-line { margin: 4px 6px 12px; text-align: center; font-family: var(--ef-serif); font-style: italic; font-size: 14.5px; color: var(--ef-teal-deep); }
.ef-toldus-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.ef-toldus-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--ef-gold); border-radius: 999px; background: var(--ef-gold-soft); color: #6b4e00; font-size: 12px; font-weight: 700; }
.ef-toldus-chip button { border: 0; background: none; color: #6b4e00; font-size: 12px; cursor: pointer; padding: 0; line-height: 1; }
.ef-reason-toldus { color: var(--ef-gold); font-weight: 700; }
/* Stated plainly rather than styled as an alert: widening a search to find
   somebody is an honest thing to admit, not a failure to apologise for. */
.ef-reason-relaxed { color: var(--ef-muted); font-style: italic; }
.ef-tease-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(1.5px) saturate(.95); transform: scale(1.03); }
.ef-tease-pill { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); white-space: nowrap; }
.ef-tease-facts { display: flex; justify-content: center; align-items: baseline; gap: 8px; margin-top: 12px; font-size: 13.5px; font-weight: 700; color: var(--ef-teal-deep); }
.ef-tease-facts i { color: var(--ef-gold); font-style: normal; }
.ef-how-line { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--ef-muted); letter-spacing: .02em; margin: 12px 0; }
.ef-price-card { background: var(--ef-card); border: 1.5px solid var(--ef-teal-deep); border-radius: 20px; padding: 16px; text-align: center; position: relative; }
.ef-price-badge { position: absolute; top: -9px; right: 14px; background: var(--ef-gold); color: #3a2c07; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.ef-price-card .ef-price-amount { font-family: var(--ef-serif); font-weight: 500; font-size: 28px; }
.ef-price-card small { color: var(--ef-muted); font-size: 12px; display: block; margin-top: 2px; }
.ef-membership-activation { text-align: center; padding-top: 34px; padding-bottom: 36px; }
.ef-membership-activation .ef-button { margin-top: 20px; }
.ef-activation-spinner { width: 52px; height: 52px; margin: 0 auto 18px; border: 5px solid var(--ef-line); border-top-color: var(--ef-teal); border-radius: 50%; animation: ef-spin .8s linear infinite; }
.ef-activation-success, .ef-activation-warning { width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 800; }
.ef-activation-success { background: #dff2e9; color: var(--ef-teal-deep); }
.ef-activation-warning { background: var(--ef-gold-soft); color: #8a6414; }
.ef-activation-support { display: inline-block; margin-top: 16px; }
@keyframes ef-spin { to { transform: rotate(360deg); } }

.ef-beat { text-align: center; padding: 8px 6px 0; }
.ef-beat .ef-beat-k { font-family: var(--ef-serif); font-style: italic; color: #b8862a; font-size: 15px; }
.ef-beat h3 { font-family: var(--ef-serif); font-weight: 500; font-size: 30px; margin: 8px 0 10px; line-height: 1.15; }
.ef-beat p { color: var(--ef-muted); font-size: 14px; line-height: 1.6; margin: 0 auto; max-width: 30ch; }
.ef-beat .ef-beat-art { margin: 24px auto 0; width: 150px; height: 150px; border-radius: 50%; background: var(--ef-paper); border: 1px solid var(--ef-paper-edge); display: grid; place-items: center; font-size: 52px; }
.ef-beat-dots { display: flex; gap: 7px; justify-content: center; margin: 22px 0 12px; }
.ef-beat-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--ef-line); }
.ef-beat-dots .on { background: var(--ef-gold); width: 20px; border-radius: 4px; }

.ef-facesrow { display: flex; padding: 4px 0 2px; }
.ef-facesrow .ef-face { width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid var(--ef-paper); margin-right: -9px; background: linear-gradient(150deg,#4d7767,var(--ef-teal-deep)); display: grid; place-items: center; color: rgba(250,247,240,.55); font-family: var(--ef-serif); font-style: italic; font-size: 16px; overflow: hidden; flex: 0 0 auto; }
.ef-facesrow .ef-face img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: no-preference) {
  .ef-reveal-seq > * { opacity: 0; transform: translateY(10px); animation: ef-rise .55s ease forwards; }
  .ef-reveal-seq > *:nth-child(1) { animation-delay: .05s; }
  .ef-reveal-seq > *:nth-child(2) { animation-delay: .22s; }
  .ef-reveal-seq > *:nth-child(3) { animation-delay: .42s; }
  .ef-reveal-seq > *:nth-child(4) { animation-delay: .62s; }
  .ef-reveal-seq > *:nth-child(5) { animation-delay: .8s; }
  .ef-reveal-seq > *:nth-child(n+6) { animation-delay: .95s; }
  @keyframes ef-rise { to { opacity: 1; transform: none; } }
}

@media (max-width: 1020px) {
  .ef-result-band { grid-template-columns: 1fr; gap: 14px; }
  .ef-profile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ef-event-layout { grid-template-columns: 1fr; }
  .ef-event-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .ef-shell { display: block; }
  .ef-sidebar { display: none; }
  #screen-event-first {
    /* The nav min-height is only a floor. trackChromeHeights() replaces it
       with the rendered box so sticky controls cannot overlap it. */
    --ef-nav-h: 66px;
    --ef-nav-gap: 10px;
    --ef-nav-bottom: max(var(--ef-nav-gap), var(--ef-safe-bottom));
    --ef-bottom-chrome: calc(var(--ef-nav-bottom) + var(--ef-nav-h));
    --ef-decide-tail: 8px;
  }
  .ef-main { height: 100dvh; padding: max(22px, env(safe-area-inset-top)) 14px var(--ef-bottom-chrome); }
  /* The scroll cushion goes INSIDE the sticky containing block, not on
     .ef-main. Sticky offsets measure against the scrollport, so padding on
     .ef-main sits outside #ef-content and would shorten the sticky range —
     the decide bar would visibly hop as it released at max scroll. On
     .ef-content it extends the range instead, so the release point lands
     exactly where the bar was already pinned. */
  .ef-content { max-width: 430px; padding-bottom: 14px; }
  .ef-title { font-size: 29px; }
  .ef-subtitle { font-size: 13px; }
  .ef-refresh { padding: 8px 10px; font-size: 11px; }
  .ef-event-hero { min-height: calc(100dvh - 128px); padding: 24px 19px; border-radius: 27px; }
  .ef-event-meta { margin-top: 34px; }
  .ef-event-title { font-size: 44px; }
  .ef-event-copy { font-size: 15px; }
  .ef-event-bottom { padding-bottom: calc(var(--ef-bottom-chrome) + 20px); }
  .ef-attendee-face { width: 46px; height: 46px; flex-basis: 46px; }
  .ef-event-side { grid-template-columns: 1fr; }
  .ef-network-toolbar { grid-template-columns: 1fr; }
  .ef-segments { width: 100%; max-width: none; }
  .ef-segment { flex: 1; padding: 0 8px; font-size: 12px; }
  .ef-filter-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
  .ef-filter-row::-webkit-scrollbar { display: none; }
  .ef-filter { flex: 0 0 auto; }
  .ef-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .ef-profile-body { padding: 12px; }
  .ef-profile-name { font-size: 16px; }
  .ef-connection { grid-template-columns: 50px minmax(0, 1fr); }
  .ef-connection-profile-trigger { grid-column: 1 / -1; grid-template-columns: 50px minmax(0, 1fr); }
  .ef-connection img, .ef-connection-avatar { width: 50px; height: 50px; border-radius: 15px; }
  .ef-connection .ef-inline-actions { grid-column: 1 / -1; justify-content: stretch; }
  .ef-connection .ef-button { flex: 1; }
  .ef-incoming-request { padding: 15px; gap: 13px; }
  .ef-incoming-head { grid-template-columns: 50px minmax(0, 1fr); gap: 12px; }
  .ef-incoming-avatar { width: 50px; height: 50px; border-radius: 15px; }
  .ef-incoming-name { font-size: 17px; }
  /* The CTA keeps its full width and 52px target on mobile — it is the one
     control on this card and must not shrink towards the dock. */
  .ef-incoming-cta { font-size: 15px; gap: 9px; }
  .ef-incoming-cta-price { font-size: 13px; padding: 4px 9px; }
  .ef-me-grid { grid-template-columns: 1fr; }
  .ef-banner { align-items:flex-start; flex-direction:column; }
  .ef-member-card { order: -1; }
  /* The bottom dock owns the single mobile navigation surface. */
  .ef-bottom-dock {
    position: fixed; z-index: 8994; left: 10px; right: 10px; bottom: var(--ef-nav-bottom);
    max-width: 440px; margin: 0 auto; overflow: hidden;
    border: 1px solid rgba(226,232,227,.9); border-radius: 21px;
    background: rgba(255,255,255,.94); backdrop-filter: blur(18px);
    box-shadow: 0 15px 40px rgba(20,33,27,.16);
  }
  .ef-mobile-nav { position: static; min-height: var(--ef-nav-h); padding: 7px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  #screen-event-first .ef-mobile-nav .ef-nav-button { min-height: 46px; padding: 3px 2px; border-radius: 14px; flex-direction: column; justify-content: center; gap: 2px; font-size: 9px; font-weight: 700; line-height: 1.15; text-align: center; }
  .ef-mobile-nav .ef-nav-icon { width: 18px; height: 18px; }
  .ef-mobile-nav .ef-nav-badge { position: absolute; top: 2px; right: 11px; min-width: 17px; height: 17px; font-size: 9px; }
  .ef-modal-backdrop { align-items: end; padding: 0; }
  .ef-modal { width: 100%; max-height: 92dvh; border-radius: 25px 25px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .ef-diary-profile-backdrop { align-items: stretch; }
  .ef-diary-profile-modal { height: 100dvh; max-height: 100dvh; border-radius: 0; padding-bottom: 0; }
  .ef-diary-profile-header { padding: max(20px, env(safe-area-inset-top)) 58px 0 18px; }
  .ef-diary-profile-gallery { padding: 0 18px; }
  .ef-diary-profile-details { padding: 7px 18px 22px; }
  .ef-diary-profile-actions { padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); }
  .ef-diary-profile-actions .ef-button { min-height: 46px; padding-left: 10px; padding-right: 10px; }
  .ef-diary-waiting { grid-template-columns: minmax(0, 1fr) auto; }
  .ef-profile-section { padding: 13px; }
  .ef-profile-section .ef-detail-grid { grid-template-columns: 1fr; }
  .ef-profile-intent { padding: 15px; }
  .ef-profile-intent blockquote { font-size: 15px; }
  .ef-profile-hidden-fact { padding: 12px; }
}

@media (max-width: 360px) {
  .ef-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ef-event-title { font-size: 39px; }
}

@media (prefers-reduced-motion: reduce) {
  #screen-event-first *, #screen-event-first *::before, #screen-event-first *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

#screen-event-first :focus-visible { outline: 3px solid #f1c45c; outline-offset: 3px; }

/* Membership close: value stack before the ask. The modal previously led with
   a price and one dense sentence, which gives someone nothing to say yes to. */
.ef-sell-price { display: flex; align-items: baseline; justify-content: center; gap: 7px; margin: 14px 0 2px; }
.ef-sell-amount { font-size: 40px; font-weight: 800; letter-spacing: -1.2px; color: var(--ef-ink); line-height: 1; }
.ef-sell-per { font-size: 15px; color: var(--ef-muted); font-weight: 600; }
.ef-sell-description { color: var(--ef-muted); font-size: 14px; line-height: 1.5; margin: 8px 0 0; }
.ef-sell-renewal { text-align: center; font-size: 12.5px; color: var(--ef-teal-deep); font-weight: 700; margin: 7px 0 0; }
.ef-sell-value { text-align: center; font-size: 13px; color: var(--ef-muted); line-height: 1.45; margin: 8px auto 0; max-width: 390px; }
.ef-benefits { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--ef-line); text-align: left; display: grid; gap: 12px; }
.ef-benefits li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.42; color: var(--ef-ink); }
.ef-benefits li b { font-weight: 700; }
.ef-tick { flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%; background: var(--ef-teal); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.ef-tick-gold { background: #cda23f; font-size: 11px; }
.ef-membership-secondary { text-align: left; font-size: 12.5px; line-height: 1.5; color: var(--ef-muted); margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--ef-line); }
.ef-membership-secondary b { color: var(--ef-ink); }
.ef-sell-trust { text-align: center; font-size: 12px; color: var(--ef-muted); margin-top: 10px; }

/* Contextual membership checkout. The value story scrolls; the legal consent
   and PayPal action remain visible in a stable footer on every viewport. */
.ef-membership-sheet { position: relative; width: min(100%, 470px); max-height: min(94dvh, 900px); overflow: hidden; display: flex; flex-direction: column; border-radius: 30px; background: #fff; }
.ef-membership-close { z-index: 8; top: 16px; right: 16px; background: rgba(255,255,255,.18); color: #fff; }
.ef-membership-hero { position: relative; flex: 0 0 auto; padding: 20px 24px 18px; overflow: hidden; color: #fff; background: linear-gradient(155deg, #1b4c3a, #2f6b52); }
.ef-membership-hero::after { content: ''; position: absolute; z-index: 0; width: 280px; height: 280px; top: -165px; right: -115px; border-radius: 50%; background: rgba(201,162,75,.14); }
.ef-membership-hero > * { position: relative; z-index: 1; }
.ef-membership-eyebrow { margin: 0 44px 8px 0; color: #e1bc64; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.ef-membership-hero h2 { margin: 0; color: #fff; font-family: var(--ef-serif); font-size: 29px; font-weight: 500; line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; }
.ef-membership-hero-personal h2 { margin-right: 44px; }
.ef-membership-hero > p:last-of-type { margin: 7px 0 0; color: rgba(255,255,255,.82); font-size: 13.5px; line-height: 1.42; }
.ef-membership-faces { display: flex; min-height: 50px; margin: 0 0 10px; padding-left: 13px; }
.ef-membership-faces > span { position: relative; width: 50px; height: 50px; display: grid; place-items: center; margin-left: -13px; overflow: hidden; border: 3px solid #245a46; border-radius: 50%; background: #a9c8bb; color: rgba(255,255,255,.9); }
.ef-membership-faces img { width: 100%; height: 100%; object-fit: cover; }
.ef-membership-faces > span > svg { width: 30px; height: 30px; }
.ef-membership-faces i { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(22,55,44,.18); color: #fff; }
.ef-membership-faces i svg { width: 17px; height: 17px; }
.ef-membership-urgency { width: fit-content; display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 6px 11px; border: 1px solid rgba(225,188,100,.42); border-radius: 999px; background: rgba(201,162,75,.18); color: #f4e5c1; font-size: 11.5px; font-weight: 700; }
.ef-membership-urgency svg { width: 14px; height: 14px; color: #e1bc64; }
.ef-membership-personal-target { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 17px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: rgba(255,255,255,.1); }
.ef-membership-personal-photo { width: 54px; height: 54px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: #c8dbd2; }
.ef-membership-personal-photo img { width: 100%; height: 100%; object-fit: cover; }
.ef-membership-personal-photo svg { width: 27px; height: 27px; color: #2d6250; }
.ef-membership-personal-target b, .ef-membership-personal-target small { display: block; }
.ef-membership-personal-target b { color: #fff; font-size: 16px; }
.ef-membership-personal-target small { margin-top: 3px; color: rgba(255,255,255,.74); font-size: 12px; }
.ef-membership-general-mark { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 14px; border: 1px solid rgba(225,188,100,.45); border-radius: 18px; background: rgba(201,162,75,.18); color: #f2d895; }
.ef-membership-general-mark svg { width: 26px; height: 26px; }
.ef-membership-scroll { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 14px 24px 12px; }
.ef-membership-waiting { overflow: hidden; margin-bottom: 13px; border: 1px solid var(--ef-line); border-radius: 16px; }
.ef-membership-waiting-row { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 8px 11px; border-bottom: 1px solid var(--ef-line); }
.ef-membership-waiting-row:last-child { border-bottom: 0; }
.ef-membership-wait-avatar { width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; background: #dce8e1; color: var(--ef-teal); }
.ef-membership-wait-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ef-membership-wait-avatar svg { width: 22px; height: 22px; }
.ef-membership-wait-copy { min-width: 0; display: grid; gap: 2px; }
.ef-membership-wait-copy b, .ef-membership-wait-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ef-membership-wait-copy b { font-size: 12.5px; }
.ef-membership-wait-copy span { color: var(--ef-muted); font-size: 11.5px; }
.ef-membership-wait-time { padding: 5px 8px; border-radius: 999px; background: #fbf1d9; color: #85631b; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.ef-membership-wait-more { padding: 9px 13px; background: #f8faf8; color: var(--ef-muted); text-align: center; font-size: 11.5px; font-weight: 700; }
.ef-membership-scroll .ef-benefits { margin-top: 0; padding-top: 0; border-top: 0; }
.ef-membership-scroll .ef-benefits { gap: 9px; }
.ef-membership-scroll .ef-benefits li { font-size: 13px; line-height: 1.34; }
.ef-membership-price { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 10px; padding: 10px 13px; border: 1px solid #d5e3d9; border-radius: 14px; background: #edf4ef; }
.ef-membership-price > span { display: flex; align-items: baseline; gap: 5px; }
.ef-membership-price b { font-family: var(--ef-serif); font-size: 25px; font-weight: 600; line-height: 1; }
.ef-membership-price small { color: var(--ef-muted); font-size: 13px; }
.ef-membership-sheet-general .ef-membership-price small { white-space: nowrap; }
.ef-membership-price > strong { color: var(--ef-teal); font-size: 11.5px; text-align: right; }
.ef-membership-note { margin: 12px 0 0; color: var(--ef-muted); font-size: 12.5px; line-height: 1.5; }
.ef-membership-hero .ef-membership-expect { position: relative; margin: 8px auto 0; max-width: 34ch; color: rgba(255,255,255,.86); font-size: 13.5px; line-height: 1.45; text-align: center; }
.ef-membership-footer { flex: 0 0 auto; padding: 10px 24px calc(11px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ef-line); background: rgba(255,255,255,.98); box-shadow: 0 -10px 24px rgba(19,49,39,.06); }
.ef-membership-consent { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; color: var(--ef-muted); font-size: 10.5px; line-height: 1.4; cursor: pointer; }
.ef-membership-consent input { flex: 0 0 auto; margin-top: 2px; }
.ef-membership-footer .ef-paypal-cta { min-height: 54px; border-radius: 15px; font-size: 16px; }
.ef-membership-footer .ef-paypal-status { margin-top: 6px; font-size: 10.5px; }
.ef-membership-micro { margin: 7px 0 0; color: var(--ef-muted); text-align: center; font-size: 10.5px; }
.ef-membership-micro b { color: var(--ef-ink); }
.ef-membership-footer .ef-sell-trust { margin-top: 6px; font-size: 9.5px; line-height: 1.4; }
.ef-membership-footer .ef-sell-trust a { color: inherit; }
.ef-membership-footnote { margin-top: 5px; color: var(--ef-muted); text-align: center; font-size: 9px; line-height: 1.35; }
.ef-membership-checkout-terms { margin-top: 7px; color: var(--ef-muted); text-align: center; font-size: 9.5px; line-height: 1.35; }
.ef-membership-checkout-terms a { color: inherit; font-weight: 700; }

/* Private Live Meetings uses the marriage-led offer. Keep historical event
   paywalls unchanged and reuse the same checkout/footer mechanics. */
.ef-membership-sheet-appointments { --ef-offer-green: #2c5148; }
.ef-membership-sheet-appointments .ef-membership-hero { padding: 26px 28px 28px; background: var(--ef-offer-green); }
.ef-membership-sheet-appointments .ef-membership-hero::after { display: none; }
.ef-membership-sheet-appointments .ef-membership-general-mark { width: 48px; height: 48px; margin-bottom: 23px; border: 0; border-radius: 14px; background: rgba(255,255,255,.1); }
.ef-membership-sheet-appointments .ef-membership-hero h2 { font-size: 36px; line-height: 1.12; text-align: left; text-wrap: balance; }
.ef-membership-sheet-appointments .ef-membership-hero > p:last-of-type { margin-top: 16px; font-size: 17px; line-height: 1.5; }
.ef-membership-sheet-appointments .ef-membership-eyebrow { margin-bottom: 12px; font-size: 13px; }
.ef-membership-sheet-appointments .ef-membership-close { border: 1px solid rgba(255,255,255,.35); background: transparent; }
.ef-membership-sheet-appointments .ef-membership-scroll { padding: 23px 28px 18px; }
.ef-membership-sheet-appointments .ef-benefits { gap: 18px; }
.ef-membership-sheet-appointments .ef-benefits li { font-size: 16px; line-height: 1.4; }
.ef-membership-sheet-appointments .ef-benefits li b { font-weight: 500; }
.ef-membership-sheet-appointments .ef-tick { background: transparent; color: var(--ef-offer-green); font-size: 22px; }
.ef-membership-sheet-appointments .ef-membership-footer { padding: 14px 28px 16px; box-shadow: none; }
.ef-membership-limits { margin: 0 0 14px; color: var(--ef-muted); font-size: 12px; line-height: 1.5; }
.ef-membership-sheet-appointments .ef-membership-price { padding: 0; border: 0; background: transparent; }
.ef-membership-sheet-appointments .ef-membership-price > span { flex-wrap: wrap; gap: 7px; }
.ef-membership-sheet-appointments .ef-membership-price b { font-size: 32px; }
.ef-membership-sheet-appointments .ef-membership-price small { font-size: 16px; }
.ef-membership-sheet-appointments .ef-paypal-cta { min-height: 60px; background: var(--ef-offer-green); box-shadow: none; font-size: 20px; }
.ef-membership-sheet-appointments .ef-paypal-status:empty { display: none; }
.ef-membership-return { margin: 10px 0; color: var(--ef-muted); text-align: center; font-size: 12px; line-height: 1.4; }
.ef-member-card .ef-member-invitation-limits { font-size: 12px; line-height: 1.5; }

@media (max-width: 620px) {
  .ef-membership-backdrop { align-items: end; }
  /* Hug the content: a fixed height made the flex:1 scroll pane absorb the
     slack as white space. max-height still caps a long variant, and the footer
     stays pinned because it is a flex:0 0 auto sibling of a scrolling body. */
  .ef-membership-sheet { width: 100%; max-height: calc(100dvh - 14px); padding-bottom: 0; border-radius: 28px 28px 0 0; }
  .ef-membership-hero { padding: 18px 20px 15px; }
  .ef-membership-hero h2 { font-size: 27px; }
  .ef-membership-scroll { padding: 13px 20px 11px; }
  .ef-membership-footer { padding: 9px 20px calc(10px + env(safe-area-inset-bottom)); }
  .ef-membership-sheet-appointments .ef-membership-hero { padding: 20px 22px; }
  .ef-membership-sheet-appointments .ef-membership-hero h2 { font-size: 31px; }
  .ef-membership-sheet-appointments .ef-membership-hero > p:last-of-type { margin-top: 12px; font-size: 16px; }
  .ef-membership-sheet-appointments .ef-membership-scroll { padding: 18px 22px; }
  .ef-membership-sheet-appointments .ef-membership-footer { padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); }
  .ef-membership-sheet-appointments .ef-membership-price small { font-size: 14px; }
}

@media (max-height: 760px) {
  .ef-membership-sheet-appointments .ef-membership-hero { padding-top: 16px; padding-bottom: 16px; }
  .ef-membership-sheet-appointments .ef-membership-general-mark { display: none; }
  .ef-membership-sheet-appointments .ef-membership-hero h2 { font-size: 28px; }
  .ef-membership-sheet-appointments .ef-membership-hero > p:last-of-type { margin-top: 8px; font-size: 14px; }
  .ef-membership-sheet-appointments .ef-membership-scroll { padding-top: 12px; padding-bottom: 12px; }
  .ef-membership-sheet-appointments .ef-benefits { gap: 12px; }
  .ef-membership-sheet-appointments .ef-paypal-cta { min-height: 48px; }
  .ef-membership-sheet-appointments .ef-membership-price b { font-size: 28px; }
}

@media (max-width: 370px) {
  .ef-membership-hero { padding-top: 18px; }
  .ef-membership-hero h2 { font-size: 25px; }
  .ef-membership-waiting-row { grid-template-columns: 36px minmax(0, 1fr); }
  .ef-membership-wait-avatar { width: 36px; height: 36px; }
  .ef-membership-wait-time { grid-column: 2; justify-self: start; }
}

/* Blur alone reads as a broken image, not as something purchasable. The lock
   overlay names the reason and gives it a tap target. */
.ef-unlock-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(180deg, rgba(20,33,27,.10), rgba(20,33,27,.34)); border: 0; width: 100%; cursor: pointer; z-index: 3; padding: 0; text-align: center; }
.ef-unlock-overlay:hover .ef-unlock-pill { transform: translateY(-1px); background: #f0bd4e; }
.ef-unlock-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--ef-gold); color: #352500; font-size: 14px; font-weight: 800; padding: 11px 18px; border-radius: 999px; box-shadow: 0 10px 24px rgba(20,33,27,.28); transition: transform .15s ease, background .15s ease; }
.ef-unlock-sub { font-size: 12.5px; font-weight: 600; color: #fff; text-shadow: 0 1px 6px rgba(20,33,27,.55); letter-spacing: .01em; }

/* Pass reasons: a tap rather than an essay. Sized for a thumb — this is the
   step where a required text box produced keyboard mash from people who just
   wanted to say no. */
.ef-pass-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ef-pass-reason { padding: 9px 13px; border: 1px solid var(--ef-line); border-radius: 999px; background: transparent; color: var(--ef-ink); font: inherit; font-size: 12.5px; line-height: 1.2; cursor: pointer; min-height: 38px; }
.ef-pass-reason:hover { border-color: var(--ef-gold); }
.ef-pass-reason.is-selected { border-color: var(--ef-gold); background: var(--ef-gold); color: #1a1a1a; font-weight: 600; }
.ef-pass-reason:focus-visible { outline: 2px solid var(--ef-gold); outline-offset: 2px; }

/* The locked-interest hero proves there are real requests without reviving the
   retired credit model. Every face here is a server-baked blurred derivative;
   an original photo is never present in the free response or the DOM. */
.ef-interest-hero { margin-bottom: 22px; padding: 23px 22px; border-radius: 24px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; background: linear-gradient(135deg, #194d3e, #2d7059); color: #f7f3e9; box-shadow: 0 18px 40px rgba(20,71,55,.2); }
.ef-interest-hero-avatars { display: flex; align-items: center; padding-left: 4px; }
.ef-interest-hero-avatar { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; border: 4px solid #225b48; background: #d8b79e; color: rgba(255,255,255,.9); }
.ef-interest-hero-avatar + .ef-interest-hero-avatar { margin-left: -14px; }
.ef-interest-hero-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ef-interest-hero-avatar svg { width: 25px; height: 25px; }
.ef-interest-hero-copy { min-width: 0; text-align: left; }
.ef-interest-hero-copy h2 { margin: 0; color: inherit; font-family: var(--ef-serif); font-size: 26px; font-weight: 500; line-height: 1.05; letter-spacing: -.01em; }
.ef-interest-hero-copy p { margin: 8px 0 0; color: rgba(247,243,233,.83); font-size: 14px; line-height: 1.45; }
.ef-interest-hero-status { min-width: 94px; min-height: 86px; padding: 11px; border: 1px solid rgba(247,243,233,.27); border-radius: 18px; display: grid; place-items: center; align-content: center; gap: 2px; background: rgba(247,243,233,.12); text-align: center; }
.ef-interest-hero-lock { width: 21px; height: 21px; margin-bottom: 2px; color: var(--ef-gold); }
.ef-interest-hero-status strong { font-family: var(--ef-serif); font-size: 20px; font-weight: 500; line-height: 1.05; }
.ef-interest-hero-status small { color: rgba(247,243,233,.76); font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* Incoming identities are never delivered to a free client. This card renders
   the safe teaser and validated sender note, with the proposed call elevated
   as a concrete reason to unlock. The information area opens the same offer. */
.ef-incoming-teaser { padding: 22px; display: grid; gap: 18px; overflow: hidden; border-color: rgba(208,160,59,.42); box-shadow: 0 14px 34px rgba(31,85,70,.1); }
.ef-incoming-teaser-main { width: 100%; min-width: 0; display: grid; gap: 16px; padding: 0; border: 0; border-radius: 15px; background: transparent; color: var(--ef-ink); box-shadow: none; text-align: left; cursor: pointer; }
.ef-incoming-teaser-main:hover { transform: none; box-shadow: none; }
.ef-incoming-teaser-main:focus-visible { outline: 3px solid var(--ef-gold); outline-offset: 5px; }
.ef-incoming-teaser-person { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 15px; align-items: center; }
.ef-incoming-teaser-photo { position: relative; display: block; width: 82px; height: 90px; overflow: visible; border-radius: 18px; background: var(--ef-teal-soft); }
.ef-incoming-teaser-photo > img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }
.ef-incoming-teaser-photo > span { width: 100%; height: 100%; display: grid; place-items: center; padding: 25px; border-radius: inherit; color: #fff; background: linear-gradient(145deg, #c8dfd3, #91bca6); }
.ef-incoming-teaser-photo > i { position: absolute; right: -5px; bottom: -5px; width: 29px; height: 29px; display: grid; place-items: center; padding: 7px; border: 3px solid #fff; border-radius: 50%; background: var(--ef-gold); color: #352500; font-style: normal; }
.ef-incoming-teaser-copy { display: grid; justify-items: start; gap: 7px; min-width: 0; }
.ef-incoming-teaser-copy > strong { font-family: var(--ef-serif); font-size: 24px; font-weight: 500; line-height: 1.1; }
.ef-incoming-teaser-copy > small { color: var(--ef-muted); font-size: 13.5px; line-height: 1.4; }
.ef-incoming-teaser-verified { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #e6f0ea; color: #267056; font-size: 11.5px; font-weight: 800; }
.ef-incoming-teaser-verified i { width: 15px; height: 15px; }
.ef-incoming-teaser-time { min-height: 76px; display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 13px; padding: 12px 14px; border: 1px solid #ecd7a3; border-radius: 15px; background: #fbf2dc; color: #6e5212; font-style: normal; }
.ef-incoming-teaser-date { width: 54px; height: 54px; display: grid; place-items: center; align-content: center; border: 1px solid #e6c579; border-radius: 13px; background: #fffdfa; line-height: 1; }
.ef-incoming-teaser-date strong { font-family: var(--ef-serif); font-size: 22px; font-weight: 600; }
.ef-incoming-teaser-date small { margin-top: 3px; font-size: 9.5px; font-weight: 900; letter-spacing: .08em; }
.ef-incoming-teaser-time-copy { display: grid; gap: 4px; min-width: 0; }
.ef-incoming-teaser-time-copy strong { font-size: 16px; line-height: 1.2; }
.ef-incoming-teaser-time-copy small { color: #98762a; font-size: 12px; }
.ef-incoming-teaser-time-missing { grid-template-columns: 1fr; }
.ef-incoming-teaser-message { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; padding: 14px 15px; border: 1px solid #dbe8e1; border-radius: 15px; background: #f2f7f4; color: var(--ef-ink); }
.ef-incoming-teaser-message > i { width: 24px; height: 24px; padding: 3px; color: var(--ef-teal); font-style: normal; }
.ef-incoming-teaser-message > span { display: grid; gap: 4px; min-width: 0; }
.ef-incoming-teaser-message small { color: var(--ef-teal); font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.ef-incoming-teaser-message q { font-family: var(--ef-serif); font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.ef-incoming-teaser-reasons { display: flex; flex-wrap: wrap; gap: 7px; }
.ef-incoming-teaser-reasons > span { padding: 7px 11px; border-radius: 999px; background: #e6f0ea; color: #267056; font-size: 11.5px; font-weight: 800; line-height: 1.25; }
.ef-incoming-teaser-expiry { display: inline-flex; align-items: center; gap: 7px; color: #b56e52; font-size: 12.5px; font-weight: 800; }
.ef-incoming-teaser-expiry i { width: 16px; height: 16px; }
.ef-incoming-teaser-actions { display: grid; grid-template-columns: minmax(0, 1fr) 116px; gap: 10px; }
.ef-incoming-teaser-actions .ef-button { min-height: 52px; margin: 0; font-size: 15px; }
.ef-incoming-teaser-actions .ef-button:first-child { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: var(--ef-teal-deep); }
.ef-incoming-teaser-actions .ef-button:first-child span { width: 20px; height: 20px; }
.ef-incoming-teaser-actions .ef-button-secondary { color: var(--ef-muted); }

@media (max-width: 620px) {
  .ef-interest-hero { margin-top: 42px; padding: 18px; grid-template-columns: minmax(0, 1fr) auto; gap: 15px; }
  .ef-interest-hero-avatars { grid-column: 1; grid-row: 1; }
  .ef-interest-hero-avatar { width: 47px; height: 47px; }
  .ef-interest-hero-copy { grid-column: 1 / -1; grid-row: 2; }
  .ef-interest-hero-copy h2 { font-size: 27px; }
  .ef-interest-hero-status { grid-column: 2; grid-row: 1; min-width: 94px; min-height: 72px; padding: 9px 12px; }
  .ef-interest-hero-status strong { font-size: 17px; }
  .ef-incoming-teaser { padding: 17px; gap: 15px; }
  .ef-incoming-teaser-person { grid-template-columns: 72px minmax(0, 1fr); gap: 13px; }
  .ef-incoming-teaser-photo { width: 72px; height: 80px; }
  .ef-incoming-teaser-copy > strong { font-size: 21px; }
  .ef-incoming-teaser-actions { grid-template-columns: 1fr; }
  .ef-incoming-teaser-actions .ef-button-secondary { min-height: 46px; }
}

@media (max-width: 390px) {
  .ef-interest-hero-copy h2 { font-size: 24px; }
  .ef-interest-hero-status { min-width: 84px; }
  .ef-day-head { align-items: flex-start; flex-direction: column; gap: 2px; }
  .ef-incoming-teaser-time { grid-template-columns: 49px minmax(0, 1fr); padding: 11px; }
  .ef-incoming-teaser-date { width: 49px; height: 49px; }
}

/* Intro Credit chooser. Price sits in the product cards, never in the action
   label. The consent and renewal copy remain visible before either checkout. */
.ef-credit-modal { width: min(100%, 460px); border-radius: 32px; }
.ef-credit-modal .ef-modal-body { padding: 28px 28px 24px; }
.ef-credit-modal .ef-modal-close { width: 42px; height: 42px; background: #e9eeeb; color: #24342d; font-size: 20px; }
.ef-credit-modal .ef-eyebrow { color: var(--ef-teal); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.ef-credit-modal .ef-modal-title { color: #273f91; font-family: var(--ef-serif); font-size: clamp(31px, 8vw, 39px); line-height: 1.04; letter-spacing: -.02em; }
.ef-credit-call-time { margin: 8px 0 0; color: var(--ef-muted); font-size: 15px; line-height: 1.35; }
.ef-credit-call-time strong { color: var(--ef-ink); font-weight: 700; }
.ef-unlock-offer { border: 1px solid var(--ef-line); border-radius: 14px; padding: 14px; margin-top: 14px; background: #fbfdfb; text-align: left; }
.ef-credit-wallet { border: 0; border-radius: 0; padding: 0; margin-top: 20px; background: transparent; }
.ef-credit-balance { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border: 1px solid #cee2d6; border-radius: 14px; background: #eef5f1; color: var(--ef-muted); font-size: 13px; line-height: 1.45; }
.ef-credit-balance b { color: var(--ef-ink); }
.ef-credit-spark { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #d3a63f; color: #173d31; font-size: 17px; }
.ef-credit-kicker { margin: 20px 0 10px; color: #78847e; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.ef-credit-options { display: grid; gap: 10px; }
.ef-credit-option { position: relative; min-height: 78px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 16px; border: 1.5px solid #dfe5e1; border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.ef-credit-option:hover { border-color: #91b7a6; }
.ef-credit-option.is-selected { border-color: #205e4b; background: #f4f9f6; box-shadow: inset 0 0 0 .5px #205e4b; }
.ef-credit-option input { position: absolute; opacity: 0; pointer-events: none; }
.ef-credit-option:has(input:focus-visible) { outline: 3px solid rgba(32,94,75,.24); outline-offset: 2px; }
.ef-credit-radio { width: 22px; height: 22px; display: block; border: 2px solid #cbd6d0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 5px #fff; }
.ef-credit-option.is-selected .ef-credit-radio { border-color: #205e4b; background: #205e4b; }
.ef-credit-option-copy { display: grid; gap: 3px; min-width: 0; }
.ef-credit-option-copy b { color: var(--ef-ink); font-size: 17px; line-height: 1.15; }
.ef-credit-option-copy small { color: var(--ef-muted); font-size: 12.5px; }
.ef-credit-option-price { display: grid; justify-items: end; gap: 2px; white-space: nowrap; }
.ef-credit-option-price b, .ef-credit-option-price .ef-unlock-price { color: var(--ef-ink); font-size: 21px; font-weight: 800; line-height: 1; }
.ef-credit-option-price small { color: var(--ef-muted); font-size: 11px; }
.ef-credit-option-unlimited { margin-top: 1px; border-color: #d1a13d; background: #fff7e5; }
.ef-credit-option-unlimited.is-selected { border-color: #c9962c; background: #fff2d3; box-shadow: inset 0 0 0 .5px #c9962c; }
.ef-credit-option-unlimited.is-selected .ef-credit-radio { border-color: #c9962c; background: #c9962c; }
.ef-credit-best { position: absolute; top: -9px; right: 14px; padding: 3px 10px; border-radius: 999px; background: #d2a43d; color: #463100; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ef-unlock-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 15px; }
.ef-unlock-price { font-size: 20px; font-weight: 800; white-space: nowrap; }
.ef-unlock-copy { font-size: 12.5px; color: var(--ef-muted); line-height: 1.5; margin: 8px 0 0; }
.ef-unlock-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 11px; color: var(--ef-muted); line-height: 1.5; margin: 12px 0 10px; cursor: pointer; }
.ef-unlock-consent input { margin-top: 2px; flex: 0 0 auto; }
.ef-unlock-cta { display: block; width: 100%; min-height: 48px; margin: 0; }
.ef-unlock-cta[disabled] { opacity: .5; pointer-events: none; }
.ef-unlock-foot { font-size: 10.5px; color: var(--ef-muted); line-height: 1.5; margin: 9px 0 0; }
.ef-credit-main-cta { min-height: 56px; margin-top: 13px; border-radius: 15px; font-size: 15px; }
.ef-credit-wallet-foot { margin-top: 14px; text-align: center; font-size: 11.5px; }
.ef-credit-outcome { margin: 5px 0 0; color: var(--ef-muted); text-align: center; font-size: 9.5px; line-height: 1.45; }
.ef-unlock-or { text-align: center; font-size: 11px; color: var(--ef-muted); margin: 14px 0 2px; }

@media (max-width: 620px) {
  .ef-credit-modal .ef-modal-body { padding: 24px 20px 20px; }
  .ef-credit-option { min-height: 74px; padding: 14px 13px; }
  .ef-credit-option-copy b { font-size: 16px; }
  .ef-credit-option-price b, .ef-credit-option-price .ef-unlock-price { font-size: 19px; }
}

/* Membership demoted to one line on the incoming-request paywall. Extends
   .ef-text-action rather than inventing a button style, and deliberately does
   NOT undo its underline on the price half — this has to read as a link out to
   another surface, not as a second CTA competing with the £9.99. */
.ef-unlock-membership-link { display: block; width: 100%; margin: 16px auto 0; padding: 10px 6px; text-align: center; text-decoration: none; line-height: 1.5; }
.ef-unlock-membership-link span { display: block; font-size: 12px; color: var(--ef-muted); }
.ef-unlock-membership-link b { display: block; font-size: 13px; margin-top: 2px; text-decoration: underline; }
/* Personal Introductions: a deliberate premium delivery choice, not a second
   competing profile CTA. */
.ef-delivery-choice{width:100%;display:grid;grid-template-columns:28px 1fr auto;gap:13px;align-items:start;text-align:left;border:2px solid #dce4dd;border-radius:18px;background:#fff;padding:18px;margin-top:12px;color:var(--ef-ink);cursor:pointer}
.ef-delivery-choice:hover,.ef-delivery-choice:focus-visible{border-color:var(--ef-green);outline:3px solid rgba(31,94,72,.14);outline-offset:2px}
.ef-delivery-choice span:nth-child(2){display:flex;flex-direction:column;gap:5px}.ef-delivery-choice strong{font-size:17px}.ef-delivery-choice small{color:var(--ef-muted);line-height:1.45}.ef-delivery-choice>b{font-size:13px;white-space:nowrap;color:var(--ef-muted)}
.ef-delivery-radio{width:24px;height:24px;border:3px solid #c9d5ce;border-radius:50%;display:grid;place-items:center;color:#a47714;font-size:21px;line-height:1}
.ef-delivery-personal{border-color:#d3a63b;background:linear-gradient(135deg,#fffaf0,#f9edca)}.ef-delivery-personal .ef-delivery-radio{border-color:#d3a63b}.ef-delivery-personal>b{background:#f2dfaa;color:#70500b;padding:5px 9px;border-radius:999px}
.ef-personal-progress{display:grid;grid-template-columns:26px 1fr;gap:2px 9px;margin:10px 0;padding:12px 14px;border-radius:14px;background:#fff6dd;color:#6b4a09}.ef-personal-progress>span{grid-row:1/3;font-size:23px}.ef-personal-progress small{color:#806b42}
.ef-personal-count{display:grid;place-items:center;min-width:48px;height:48px;border-radius:16px;background:#fff1c9;color:#75500a;font-size:24px}
.ef-personal-review-pending{border-color:#e7cb80}.ef-personal-review-pending .ef-incoming-avatar{display:grid;place-items:center;background:#fff1c9;color:#8a6010;font-size:28px}

@media(max-width:640px){.ef-delivery-choice{grid-template-columns:25px 1fr}.ef-delivery-choice>b{grid-column:2;justify-self:start}.ef-personal-progress{margin-top:8px}}
/* Shared Events: an attendee dashboard, separate from legacy hosted-room chrome.
   Scoped resets prevent the old page's blue/centred headings and button shadows
   from leaking into this surface. Results contain anonymous placeholders only. */
.ef-shared-dashboard { max-width: 1120px; margin: 16px auto 0; }
#screen-event-first .ef-shared-dashboard h1,
#screen-event-first .ef-shared-dashboard h2,
#screen-event-first .ef-shared-dashboard h3 { color: inherit; text-align: left; padding: 0; }
.ef-shared-dashboard p { margin: 0; }
#screen-event-first .ef-shared-dashboard button { box-shadow: none; }
#screen-event-first .ef-shared-dashboard .ef-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 9px; min-height: 44px; padding: 10px 16px; font-size: 13px; font-weight: 700; }
.ef-shared-dashboard .ef-button svg { flex: 0 0 auto; }
.ef-shared-dashboard .ef-button:hover { filter: brightness(.95); }
.ef-shared-dashboard button:focus-visible, .ef-shared-dashboard select:focus-visible { outline: 3px solid #b78938; outline-offset: 3px; }
.ef-shared-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.ef-shared-heading .ef-eyebrow { font-size: 10px; letter-spacing: .14em; }
.ef-shared-heading h1 { margin: 9px 0 8px; font: 500 42px/1.1 var(--ef-serif); letter-spacing: -.035em; }
.ef-shared-heading p { color: var(--ef-muted); font-size: 14px; }
.ef-free-label { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 12px; color: var(--ef-teal-deep); border: 1px solid #d4e0d8; border-radius: 30px; padding: 10px 14px; }
.ef-shared-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 26px; align-items: start; }
.ef-shared-primary, .ef-shared-aside { min-width: 0; }
.ef-event-ticket { border: 1px solid #dce3dd; border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 8px 24px #14211b05; }
.ef-ticket-top { padding: 28px; background: #214b3e; color: #fff; }
.ef-ticket-kicker { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: #bad5c6; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ef-booking-status { border: 1px solid #ffffff30; border-radius: 5px; padding: 6px 9px; color: #e6f6ed; font-size: 10px; letter-spacing: .02em; text-transform: none; }
.ef-ticket-top h2 { margin: 25px 0 10px; font: 500 clamp(24px, 2.5vw, 33px)/1.15 var(--ef-serif); letter-spacing: -.025em; }
.ef-ticket-time { display: flex; align-items: center; gap: 7px; color: #fff; font-size: 16px; font-weight: 600; }
.ef-ticket-time span { color: #c1d4c9; font-size: 12px; font-weight: 400; }
.ef-ticket-facts { display: flex; flex-wrap: wrap; gap: 8px 15px; margin: 22px 0; color: #c1d4c9; font-size: 11px; }
.ef-ticket-facts span + span::before { content: '·'; margin-right: 15px; color: #8bad9a; }
.ef-ticket-attendance { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #c1d4c9; font-size: 10px; }
.ef-ticket-attendance strong { color: #fff; font-weight: 600; }
.ef-seat-track { display: flex; gap: 4px; margin: 8px 0 24px; }
.ef-seat-track i { flex: 1; height: 4px; border-radius: 2px; background: #ffffff20; }
.ef-seat-track .is-filled { background: #b6ccb7; }
.ef-ticket-actions { display: flex; gap: 10px; flex-wrap: wrap; }
#screen-event-first .ef-ticket-actions .ef-button { width: auto; background: #f5f0e4; color: #214b3e; }
#screen-event-first .ef-ticket-actions .ef-ticket-secondary { border: 1px solid #ffffff40; color: #fff; background: transparent; }
.ef-ticket-hint { color: #bcd2c5; font-size: 11px; line-height: 1.6; margin-top: 12px !important; max-width: 430px; }
.ef-event-welcome .ef-ticket-top > p { color: #c1d4c9; line-height: 1.65; font-size: 14px; }
.ef-event-invitations { padding: 24px 28px 20px; }
.ef-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ef-section-heading h3 { margin: 0; font-size: 14px; font-weight: 700; }
.ef-section-heading h3 span { display: inline-block; margin-left: 6px; padding: 2px 6px; background: #eef3ed; border-radius: 4px; color: #426351; font-size: 10px; }
.ef-section-heading small { color: #79817b; font-size: 10px; }
.ef-invitation-list { margin-top: 13px; max-height: 260px; overflow-y: auto; }
.ef-invitation-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #edf0eb; }
.ef-invitation-row:last-child { border: 0; }
.ef-invitation-avatar { width: 34px; height: 38px; flex-shrink: 0; border-radius: 8px; background: #e8eee7; display: grid; place-items: center; overflow: hidden; color: #66806c; }
.ef-invitation-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ef-invitation-row > strong { font-size: 12px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ef-invitation-status { margin-left: auto; color: #7a7567; font-size: 10px; white-space: nowrap; }
.ef-invitation-status.is-confirmed { color: #3a7454; }
.ef-invitation-status.is-confirmed::before { content: ''; display: inline-block; width: 5px; height: 5px; background: #659b72; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
#screen-event-first .ef-invitation-remove { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; color: #777e76; background: none; border: 0; border-radius: 4px; cursor: pointer; }
.ef-invitation-empty { color: #737d73; font-size: 13px; line-height: 1.7; margin: 18px 0 !important; }
.ef-invitation-disclosure { color: #7b8178; font-size: 10px; line-height: 1.6; margin-top: 16px !important; }
.ef-ticket-footer { border-top: 1px solid #edf0eb; padding: 15px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ef-ticket-footer > span { color: #7a8177; font-size: 10px; }
#screen-event-first .ef-ticket-footer .ef-text-action { width: auto; min-height: 24px; padding: 0; font-size: 10px; white-space: nowrap; background: transparent; color: #687368; }
.ef-destination-switch { display: grid; gap: 8px; padding: 14px 28px; border-top: 1px solid #edf0eb; font-size: 11px; color: #687368; }
.ef-destination-switch select { max-width: 100%; border: 1px solid #dce3dd; border-radius: 6px; padding: 8px; background: #fff; color: #214b3e; }
.ef-shared-results { background: #f3eee3; border: 1px solid #e6dfd0; border-radius: 18px; padding: 26px; }
.ef-shared-results .ef-eyebrow { color: #82765c; font-size: 9px; }
.ef-shared-results h2 { font: 500 25px/1.2 var(--ef-serif); letter-spacing: -.025em; margin: 12px 0 20px; }
.ef-results-tally { display: flex; align-items: center; gap: 13px; }
.ef-results-tally > strong { font: 400 52px/1 var(--ef-serif); color: #294937; }
.ef-results-tally > span { font-size: 11px; line-height: 1.8; color: #736f62; }
.ef-results-tally b { font-weight: 500; color: #3e5f47; }
.ef-results-reveal { display: flex; align-items: center; gap: 14px; margin: 22px 0; padding: 16px 0; border-top: 1px solid #e2dbc9; border-bottom: 1px solid #e2dbc9; }
.ef-locked-results { display: flex; padding-left: 3px; }
.ef-result-placeholder { width: 48px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 2px solid #f3eee3; border-radius: 11px; color: #8da191; background: #d9e2d6; margin-left: -3px; }
.ef-result-placeholder > span { display: block; filter: blur(5px); user-select: none; }
.ef-result-placeholder svg { width: 42px; height: 42px; }
.ef-results-lock { display: flex; gap: 6px; align-items: center; color: #7b725e; font-size: 10px; line-height: 1.6; }
.ef-results-lock svg { flex-shrink: 0; }
.ef-results-price { text-align: center; color: #736d5e; font-size: 10px; margin: 9px 0 16px !important; }
.ef-results-note { font-size: 10px; color: #858070; line-height: 1.7; }
.ef-result-person { border-top: 1px solid #e2dbc9; margin-top: 18px; padding-top: 15px; }
.ef-result-person-top { display: flex; align-items: center; gap: 11px; }
.ef-result-person-top strong { font-size: 13px; display: block; }
.ef-result-person-top span { display: block; font-size: 10px; color: #567455; margin-top: 4px; }
.ef-result-person-actions { display: grid; gap: 8px; margin-top: 14px; }
#screen-event-first .ef-result-person .ef-text-action { background: transparent; font-size: 11px; min-height: 25px; }
.ef-result-person p { color: #777262; font-size: 11px; line-height: 1.6; margin-top: 12px; }
.ef-evening-guide { padding: 26px 8px 0; }
.ef-evening-guide .ef-eyebrow { font-size: 9px; color: #778071; }
.ef-evening-guide ol { list-style: none; counter-reset: evening; margin: 20px 0 0; padding: 0; }
.ef-evening-guide li { position: relative; padding: 0 0 20px 32px; counter-increment: evening; }
.ef-evening-guide li::before { content: counter(evening, decimal-leading-zero); position: absolute; top: 2px; left: 0; color: #899b85; font-size: 10px; }
.ef-evening-guide strong { display: block; font-size: 11px; font-weight: 600; }
.ef-evening-guide p { margin-top: 6px; font-size: 10px; line-height: 1.7; color: #7a8276; }
.ef-live-dates { margin-top: 34px; padding-bottom: 24px; }
.ef-live-dates h2 { margin: 0 0 6px; font: 500 24px/1.2 var(--ef-serif); letter-spacing: -.025em; }
.ef-live-dates .ef-section-heading p { font-size: 11px; color: #788071; }
.ef-calendar-label { display: flex; align-items: center; gap: 7px; white-space: nowrap; color: #788071; font-size: 10px; }
.ef-event-date-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.ef-event-date { display: flex; flex-direction: column; align-items: flex-start; padding: 16px 12px 12px; border: 1px solid #e0e5dc; border-radius: 11px; background: #ffffff80; min-width: 0; }
.ef-event-date.is-selected { background: #e7eee3; border-color: #afc1a7; }
.ef-date-weekday { text-transform: uppercase; letter-spacing: .08em; font-size: 9px; color: #7f8878; }
.ef-date-number { font: 500 29px/1.2 var(--ef-serif); margin-top: 7px; }
.ef-date-month { color: #6e7869; font-size: 9px; margin-top: 2px; }
.ef-date-availability { color: #78836e; font-size: 9px; margin: 15px 0 12px; }
#screen-event-first .ef-event-date .ef-button { margin-top: auto; min-height: 32px; padding: 7px 4px; background: #fff; border: 1px solid #dde4d7; color: #385d41; font-size: 10px; border-radius: 5px; }
#screen-event-first .ef-event-date .ef-button:disabled { background: transparent; color: #6e8164; opacity: 1; cursor: default; }
.ef-date-closed { margin-top: auto; min-height: 32px; padding-top: 9px; color: #8e9589; font-size: 9px; }
.ef-calendar-note { color: #808779; font-size: 10px; line-height: 1.6; margin-top: 14px !important; }
.ef-demo-tools { border: 1px dashed #c1cfc0; border-radius: 12px; padding: 20px; margin-top: 20px; }
.ef-demo-tools > strong { display: block; font-size: 14px; margin: 10px 0; }
.ef-demo-tools p { color: #788071; font-size: 11px; line-height: 1.6; }
.ef-demo-tools > div:last-child { display: flex; gap: 10px; margin-top: 15px; }
.ef-live-inviter-photo { max-width: 180px; width: 100%; border-radius: 14px; }
#screen-event-first .ef-simulation-create { font-size: 12px; background: transparent; width: auto; }
#screen-event-first .ef-nav-button { box-shadow: none; background: transparent; border-radius: 9px; }
#screen-event-first .ef-nav-button:hover { background: #e7eee7; }
#screen-event-first .ef-nav-button[aria-current='page'] { background: #2a6b57; }
#screen-event-first .ef-account-logout { box-shadow: none; background: transparent; border-radius: 9px; }
#screen-event-first .ef-topbar-btn { box-shadow: none; }
.ef-brand-mark { box-shadow: none; }
.ef-invitation-row > strong { font-size: 13px; }
.ef-invitation-status, .ef-section-heading small { font-size: 11px; }
.ef-results-tally > span { font-size: 12px; }
.ef-results-note, .ef-evening-guide p, .ef-invitation-disclosure { font-size: 11px; }
.ef-evening-guide strong { font-size: 12px; }
@media (max-width: 1100px) {
  .ef-shared-grid { grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr); gap: 18px; }
  .ef-ticket-top, .ef-event-invitations { padding: 22px; }
  .ef-shared-results { padding: 22px; }
  .ef-event-date-grid { grid-template-columns: repeat(7, minmax(100px, 1fr)); overflow-x: auto; padding-bottom: 8px; }
}
@media (max-width: 900px) {
  .ef-shared-grid { grid-template-columns: minmax(0, 1fr); }
  .ef-shared-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
  .ef-evening-guide { padding-top: 12px; }
}
@media (max-width: 640px) {
  .ef-shared-dashboard { margin-top: 46px; }
  .ef-shared-heading { margin-bottom: 24px; align-items: flex-end; gap: 10px; }
  .ef-shared-heading h1 { font-size: 34px; }
  .ef-shared-heading p { font-size: 12px; max-width: 230px; line-height: 1.6; }
  .ef-shared-heading .ef-eyebrow { font-size: 8px; }
  .ef-free-label { font-size: 9px; padding: 7px 9px; margin-bottom: 4px; gap: 5px; }
  .ef-free-label svg { width: 14px; height: 14px; }
  .ef-shared-aside { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ef-ticket-top, .ef-event-invitations, .ef-shared-results { padding: 22px; }
  .ef-ticket-top h2 { font-size: 27px; }
  .ef-ticket-facts { gap: 8px 10px; font-size: 9px; }
  .ef-ticket-facts span + span::before { margin-right: 10px; }
  .ef-ticket-footer { padding: 14px 22px; }
  .ef-ticket-footer > span { max-width: 180px; line-height: 1.6; }
  #screen-event-first .ef-ticket-actions .ef-button { width: 100%; }
  .ef-evening-guide { padding: 20px 8px 0; }
  .ef-live-dates { margin-top: 24px; }
  .ef-calendar-label { display: none; }
  .ef-event-date-grid { margin-right: -14px; padding-right: 14px; }
}
/* Device checks live in the original event controller, including real events. */
.ef-media-preflight { box-sizing:border-box; width:min(520px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; border:1px solid #d8e3df; border-radius:20px; padding:24px; color:#183b31; background:#fff; font-family:'DM Sans',sans-serif; }
.ef-media-preflight::backdrop { background:rgba(10,30,23,.6); }
.ef-media-preflight h2 { margin:0 0 10px; font-size:25px; }
.ef-media-preflight p { font-size:15px; line-height:1.5; }
.ef-media-preflight video { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; background:#142b23; transform:scaleX(-1); }
.ef-preflight-devices { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0; }
.ef-preflight-devices label { min-width:0; font-size:14px; }
.ef-preflight-devices select { display:block; width:100%; min-height:44px; margin-top:6px; border:1px solid #bccfc6; border-radius:8px; padding:8px; background:white; }
.ef-preflight-meter { display:grid; gap:8px; font-size:14px; margin-bottom:16px; }
.ef-preflight-meter progress { width:100%; accent-color:#26705a; }
.ef-preflight-actions { display:flex; gap:10px; margin-top:18px; }
.ef-preflight-actions .ef-button { flex:1; }
/* Private appointment rooms reuse the existing shell and video controller. */
.ef-appointment-dashboard { max-width: 1040px; margin: 0 auto; display: grid; gap: 24px; }
.ef-nav-button[hidden] { display: none !important; }
.ef-events-refresh { --ef-event-green: #1c4c3b; }
.ef-events-refresh .ef-main { padding: 0 32px 64px; scroll-padding-top: 148px; }
.ef-events-refresh .ef-content { max-width: 1120px; }
.ef-membership-home { max-width: 1120px; margin: auto; }
.ef-member-event-header { position: sticky; top: 0; z-index: 3; display: block; background: #fff; border-bottom: 1px solid var(--ef-line); }
.ef-event-masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 24px 10px; }
.ef-event-brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.ef-event-brand .ef-brand-mark { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px; background: #1c4c3b; box-shadow: none; }
.ef-event-brand .ef-eyebrow { color: #65776d; font-size: .75rem; letter-spacing: .15em; line-height: 1.5; }
.ef-member-event-header h1 { margin: 0; font: 500 1.9rem/1.12 var(--ef-serif); color: #172b21; }
.ef-events-refresh [data-member-toolbar] .ef-topbar { position: static; gap: 8px; }
.ef-events-refresh .ef-topbar-btn { width: 40px; height: 40px; box-shadow: none; border-color: var(--ef-line); background: #fff; color: #28654e; }
.ef-events-refresh .ef-chat-dot { background: #bf974b; animation: none; width: 7px; height: 7px; top: 8px; right: 8px; }
/* A segmented pill: one grey track, the chosen filter as a white pill. */
.ef-event-filters { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 4px 24px 16px; padding: 4px; background: #eeece6; border-radius: 999px; }
#screen-event-first .ef-event-filters button { width: auto; min-height: 42px; border: 0; border-radius: 999px; padding: 10px 6px; font-size: .9375rem; font-weight: 600; background: transparent; color: #65756d; box-shadow: none; cursor: pointer; white-space: nowrap; }
#screen-event-first .ef-event-filters button[aria-pressed=true] { color: #172b21; font-weight: 700; background: #fff; box-shadow: 0 1px 3px rgba(20,33,27,.1); }
.ef-member-ticket-banner { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 20px 24px; background: #fff; border: 0; border-bottom: 1px solid var(--ef-line); border-radius: 0; line-height: 1.45; }
/* The membership signal for a free user: what the one free ticket is worth,
   and the button that changes it. An amber card inside the feed, not a
   full-bleed strip. Members never see it. */
#screen-event-first .ef-member-ticket-banner.is-join { margin: 20px 24px 0; padding: 14px 16px; border: 1px solid #eadab6; border-radius: 18px; background: #fbf5e8; grid-template-columns: 44px minmax(0,1fr) auto; gap: 12px; }
.ef-member-ticket-banner.is-join .ef-ticket-icon { width: 44px; height: 44px; border-radius: 13px; background: #eadab6; border-color: #eadab6; color: #6b4c0c; }
.ef-member-ticket-banner.is-join .ef-ticket-copy { display: grid; gap: 2px; min-width: 0; }
.ef-member-ticket-banner.is-join .ef-ticket-copy strong { font-size: 1rem; font-weight: 700; color: #1b2b22; }
.ef-member-ticket-banner.is-join .ef-ticket-copy span { font-size: .8125rem; color: #6b5a3a; }
#screen-event-first .ef-member-ticket-banner.is-join .ef-ticket-join { width: auto; margin: 0; min-height: 42px; padding: 10px 14px; border: 0; border-radius: 999px; background: #1c4c3b; color: #fff; font-size: .8125rem; font-weight: 800; white-space: nowrap; box-shadow: 0 6px 16px rgba(28,76,59,.25); }
.ef-member-ticket-banner strong { font-size: 1rem; color: #1b2b22; }
.ef-member-ticket-banner p { margin: 3px 0 0; color: #66766e; font-size: .875rem; }
.ef-member-ticket-banner .ef-ticket-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #eadab6; border-radius: 12px; background: #fbf5e8; color: #8a652b; }
#screen-event-first .ef-member-ticket-banner .ef-ticket-remaining { display: block; width: auto; margin: 0; padding: 7px 12px; min-height: 32px; border: 1px solid #eadab6; border-radius: 24px; background: #fbf5e8; color: #806029; font-size: .875rem; font-weight: 700; line-height: 1.4; box-shadow: none; text-align: center; white-space: normal; overflow-wrap: anywhere; }
.ef-event-feed { display: grid; gap: 32px; padding: 28px 0 0; }
/* A grid item's min-width is `auto` — it grows to its content's minimum width,
   and the rail's minimum is every card side by side. Without this the section
   holding the rail stretched to 474px inside a 390px phone and pushed the
   "N scheduled" count and the bar's button off the right edge. */
.ef-event-feed > * { min-width: 0; }
.ef-member-event-section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.ef-member-event-section-title h2 { margin: 0; color: #172b21; font: 500 1.4rem/1.2 var(--ef-serif); letter-spacing: 0; text-transform: none; text-align: left; }
.ef-member-event-section-title > span { color: #637268; font-size: .875rem; }
.ef-member-event-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; align-items: stretch; }
.ef-membership-event { min-width: 0; }
.ef-event-listing { display: flex; flex-direction: column; padding: 0; gap: 0; overflow: hidden; border: 1px solid #e3e6df; border-radius: 24px; box-shadow: 0 6px 24px rgba(20,33,27,.05); scroll-margin: 16px 0; }
.ef-event-listing.is-highlighted { outline: 2px solid #337859; outline-offset: 3px; }
.ef-event-listing-heading { display: flex; align-items: flex-start; gap: 16px; padding: 22px 22px 0; }
.ef-event-attendee-preview { padding: 0 22px 18px; min-width: 0; }
.ef-event-attendee-preview .ef-attendee-faces { gap: 7px; margin: 0 0 4px; padding: 1px 1px 8px; }
.ef-event-attendee-preview .ef-attendee-face { border: 2px solid #fff; background: #e5eee9; box-shadow: 0 0 0 1px #dce5de; }
.ef-event-attendee-preview p { margin: 0; color: #52685d; font-size: .8125rem; line-height: 1.5; }
.ef-photo-sharing-note { display: block; color: #52685d; line-height: 1.5; margin-top: 4px; }
/* Solid dark-green tile: month, day, weekday all in white. */
.ef-member-date-tile { display: flex; flex-direction: column; flex-shrink: 0; width: 66px; align-items: center; overflow: hidden; border: 0; border-radius: 16px; background: #1c4c3b; color: #fff; font-style: normal; text-align: center; padding: 9px 0 8px; }
.ef-member-date-tile > span { width: 100%; text-transform: uppercase; letter-spacing: .1em; font-size: .6875rem; font-weight: 800; }
.ef-member-date-tile strong { padding-top: 1px; color: #fff; font: 500 1.9rem/1.1 var(--ef-serif); }
.ef-member-date-tile small { padding-top: 2px; color: rgba(255,255,255,.85); text-transform: uppercase; font-size: .6875rem; font-weight: 700; }
.ef-event-heading-copy { min-width: 0; flex: 1; }
.ef-event-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.ef-event-badges > span { border-radius: 7px; padding: 4px 9px; background: #eaf1ec; color: #2e7056; font-size: .6875rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.ef-event-badges .ef-event-status-badge { background: #fbf4e6; color: #8a652b; }
.ef-membership-event h3 { margin: 0; text-align: left; font: 500 1.6rem/1.18 var(--ef-serif); color: #182b20; overflow-wrap: anywhere; }
.ef-member-event-time { display: flex; align-items: center; gap: 8px; margin: 12px 22px 0; color: #5c6b63; font-size: .9375rem; font-weight: 500; line-height: 1.4; }
.ef-member-event-time svg { flex: 0 0 auto; color: #7a8a80; }
.ef-membership-event .ef-event-local-time { margin: 4px 22px 0; }
/* Overlapping faces and the headcount, under a hairline. */
.ef-attendee-stack { display: flex; align-items: center; gap: 12px; margin: 14px 22px 0; padding-top: 14px; border-top: 1px solid #ecefe9; }
.ef-attendee-stack > span { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; background: #e5eee9; box-shadow: 0 0 0 1px #dce5de; flex: 0 0 auto; }
.ef-attendee-stack > span + span { margin-left: -12px; }
.ef-attendee-stack img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ef-attendee-stack p { margin: 0; color: #3e5148; font-size: .9375rem; font-weight: 600; }
.ef-attendee-stack[data-empty] p { color: #66766e; font-weight: 500; }
.ef-event-facts-line { margin: 10px 22px 0; color: #66766e; font-size: .875rem; line-height: 1.5; }
.ef-event-location, .ef-event-local-time { margin: 5px 0 0; color: #66766e; font-size: .8125rem; line-height: 1.45; overflow-wrap: anywhere; }
.ef-event-listing-bottom { display: grid; gap: 12px; margin-top: auto; padding: 18px 22px 22px; }
.ef-event-capacity > div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: .8125rem; }
.ef-event-capacity > div > span { color: #69796f; text-transform: uppercase; font-weight: 600; }
.ef-event-capacity strong { color: #a8722a; font-weight: 800; text-align: right; }
.ef-event-capacity progress { display: block; width: 100%; height: 6px; margin-top: 8px; appearance: none; border: 0; border-radius: 6px; overflow: hidden; background: #efece4; color: #c9963f; }
.ef-event-capacity progress::-webkit-progress-bar { background: #efece4; border-radius: 6px; }
.ef-event-capacity progress::-webkit-progress-value { background: #c9963f; border-radius: 6px; }
.ef-event-capacity progress::-moz-progress-bar { background: #c9963f; border-radius: 6px; }
.ef-event-listing .ef-button, .ef-event-sheet .ef-button, .ef-event-empty .ef-button, .ef-event-result-card .ef-button { min-height: 48px; padding: 12px 17px; border: 1px solid #1c4c3b; border-radius: 14px; background: #1c4c3b; color: #fff; box-shadow: none; font-size: .9375rem; line-height: 1.3; }
.ef-event-listing .ef-button-secondary, .ef-event-sheet .ef-button-secondary, .ef-event-empty .ef-button-secondary, .ef-event-result-card .ef-button-secondary { border-color: #dce5de; background: #fff; color: #65776d; }
.ef-event-booking-status { color: #245f45; font-size: .875rem; font-weight: 700; margin: 0; }
.ef-event-fixture, .ef-member-event-detail { margin: 0; color: #68786e; font-size: .75rem; line-height: 1.5; }
.ef-event-fixture { color: #85662e; }
.ef-event-notice { margin: 0; padding: 14px 16px; border: 1px solid #dce7de; background: #f1f6f2; border-radius: 12px; color: #29573f; font-size: .875rem; line-height: 1.5; }
.ef-event-empty { grid-column: 1 / -1; padding: 36px 20px; text-align: center; border: 1px dashed #cad9ce; border-radius: 20px; }
.ef-event-empty h3 { margin: 0 0 8px; color: #254736; }
.ef-event-empty p { color: #68786e; line-height: 1.5; }
.ef-event-empty .ef-button { width: auto; }
.ef-event-result-card { padding: 24px; display: grid; gap: 16px; box-shadow: none; }
.ef-event-result-card p { margin: 0; line-height: 1.5; }
.ef-event-sheet { position: relative; width: min(100%, 540px); border: 1px solid #e2e8e3; box-shadow: 0 16px 48px #14211b24; }
.ef-event-sheet a:not(.ef-button) { color: #245f45; text-decoration: underline; }
.ef-event-sheet .ef-modal-body { padding: 28px; }
.ef-event-sheet .ef-modal-close { display: grid; place-items: center; background: #f2f6f3; color: #1c4c3b; border: 1px solid #dce5de; box-shadow: none; width: 36px; height: 36px; right: 16px; top: 16px; }
.ef-event-sheet .ef-eyebrow { padding-right: 34px; margin-bottom: 20px; }
.ef-event-sheet-heading { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 20px; }
.ef-event-sheet-heading > div { min-width: 0; }
.ef-event-sheet-heading h2 { margin: 0 0 8px; font: 500 1.65rem/1.2 var(--ef-serif); text-align: left; color: #182b20; overflow-wrap: anywhere; }
.ef-event-sheet-heading p { margin: 0; }
.ef-event-sheet p { color: #596e61; line-height: 1.55; font-size: .875rem; }
.ef-event-detail-list { margin: 18px 0; }
.ef-event-detail-list > div { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 10px; padding: 11px 0; border-bottom: 1px solid #e5ebe6; font-size: .875rem; line-height: 1.5; }
.ef-event-detail-list dt { color: #68786e; }
.ef-event-detail-list dd { margin: 0; color: #253d2d; }
.ef-event-description { white-space: pre-line; overflow-wrap: anywhere; }
.ef-event-sheet-actions { display: grid; gap: 10px; margin-top: 20px; }
.ef-event-sheet .ef-event-text-button { background: transparent; border: 0; box-shadow: none; color: #536e5d; font-size: .875rem; min-height: 44px; padding: 10px; text-decoration: underline; }
.ef-event-ticket-code { padding: 8px 18px; border: 1px dashed #bacfbf; border-radius: 16px; margin-top: 20px; }
.ef-events-refresh :focus-visible, .ef-event-sheet :focus-visible { outline: 3px solid #b08432; outline-offset: 3px; }
.ef-member-result-person { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ef-member-result-person img { width:52px; height:52px; object-fit:cover; border-radius:14px; }
.ef-anonymous-results { display:flex; gap:12px; flex-wrap:wrap; }
.ef-anonymous-results > span { display:grid; justify-items:center; gap:8px; padding:20px; background:#edf2ee; border-radius:14px; font-size:12px; }
.ef-ticket-qr { display:block; width:280px; max-width:100%; height:auto; margin:18px auto; }
.ef-member-consent { display:flex; gap:10px; margin:18px 0; font-size:.875rem; line-height:1.5; }
.ef-member-consent input { flex-shrink:0; width:18px; height:18px; margin:3px 0 0; accent-color:#1c4c3b; }
@media (min-width: 768px) and (max-width: 1099px) {
  .ef-member-event-grid { grid-template-columns: 1fr; }
}
@media(max-width:767px) {
  #screen-event-first.ef-events-member-nav { --ef-nav-gap: 0px; --ef-nav-bottom: 0px; --ef-bottom-chrome: calc(var(--ef-nav-h) + var(--ef-safe-bottom)); }
  .ef-events-member-nav .ef-bottom-dock { left: 0; right: 0; bottom: 0; border: 0; border-top: 1px solid #dfe7e1; border-radius: 0; background: #fff; box-shadow: none; padding-bottom: var(--ef-safe-bottom); backdrop-filter: none; }
  .ef-events-member-nav .ef-mobile-nav { min-height: 68px; padding: 7px 12px; }
  #screen-event-first.ef-events-member-nav .ef-mobile-nav .ef-nav-button { background: transparent; border-radius: 0; color: #697b71; font-size: .6875rem; min-height: 54px; gap: 5px; overflow-wrap: anywhere; }
  #screen-event-first.ef-events-member-nav .ef-mobile-nav .ef-nav-button[aria-current=page] { color: #1c4c3b; background: transparent; }
  .ef-events-member-nav .ef-mobile-nav .ef-nav-icon { width: 22px; height: 22px; }
  .ef-events-refresh .ef-main { padding: 0 0 calc(var(--ef-bottom-chrome) + 20px); scroll-padding-top: 132px; }
  .ef-event-masthead { padding: max(18px, env(safe-area-inset-top)) 14px 8px; gap: 12px; }
  .ef-event-brand { gap: 10px; }
  .ef-event-brand .ef-brand-mark { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; }
  .ef-event-brand .ef-eyebrow { font-size: .625rem; letter-spacing: .13em; }
  .ef-member-event-header h1 { font-size: 1.5rem; }
  .ef-events-refresh [data-member-toolbar] .ef-topbar { gap: 7px; }
  .ef-events-refresh .ef-topbar-btn { width: 34px; height: 34px; padding: 8px; }
  .ef-event-filters { margin: 2px 14px 12px; gap: 2px; }
  #screen-event-first .ef-event-filters button { min-height: 40px; padding: 9px 4px; font-size: .875rem; }
  /* On a phone the button drops under the text at full width rather than
     squeezing the sentence into a three-line sliver beside it. */
  #screen-event-first .ef-member-ticket-banner.is-join { margin: 16px 14px 0; padding: 14px; grid-template-columns: 40px minmax(0,1fr); gap: 10px 12px; }
  .ef-member-ticket-banner.is-join .ef-ticket-icon { width: 40px; height: 40px; border-radius: 12px; }
  .ef-member-ticket-banner.is-join .ef-ticket-copy strong { font-size: .9375rem; }
  .ef-member-ticket-banner.is-join .ef-ticket-copy span { font-size: .8125rem; }
  #screen-event-first .ef-member-ticket-banner.is-join .ef-ticket-join { grid-column: 1 / -1; width: 100%; min-height: 46px; font-size: .9375rem; }
  .ef-member-ticket-banner { padding: 16px 14px; gap: 10px; grid-template-columns: 34px minmax(0,1fr) auto; }
  .ef-member-ticket-banner .ef-ticket-icon { width: 34px; height: 36px; border-radius: 10px; }
  .ef-member-ticket-banner strong { font-size: .8125rem; }
  .ef-member-ticket-banner p { font-size: .75rem; }
  #screen-event-first .ef-member-ticket-banner .ef-ticket-remaining { font-size: .6875rem; padding: 6px 9px; max-width: 7.5rem; }
  .ef-event-feed { padding: 22px 14px 0; gap: 26px; }
  .ef-member-event-section-title { margin-bottom: 12px; }
  .ef-member-event-section-title h2 { font-size: 1.25rem; }
  .ef-member-event-section-title > span { font-size: .75rem; }
  .ef-member-event-grid { grid-template-columns: 1fr; gap: 16px; }
  .ef-event-listing { border-radius: 22px; }
  .ef-event-listing-heading { padding: 18px 16px 0; gap: 13px; }
  .ef-member-event-time, .ef-attendee-stack, .ef-event-facts-line, .ef-membership-event .ef-event-local-time { margin-left: 16px; margin-right: 16px; }
  .ef-event-attendee-preview { padding: 0 16px 16px; }
  .ef-member-date-tile { width: 58px; border-radius: 14px; }
  .ef-member-date-tile strong { font-size: 1.75rem; }
  .ef-membership-event h3 { font-size: 1.25rem; }
  .ef-member-event-time { font-size: .8125rem; }
  .ef-event-listing-bottom { padding: 14px 16px 18px; gap: 12px; }
  .ef-event-listing .ef-button { min-height: 48px; padding: 12px; font-size: .8125rem; }
  .ef-event-capacity > div { font-size: .75rem; }
  .ef-event-sheet { border-radius: 24px 24px 0 0; }
  .ef-event-sheet .ef-modal-body { padding: 24px 20px; }
  .ef-event-sheet-heading h2 { font-size: 1.375rem; }
}
@media(max-width:359px) {
  .ef-event-brand .ef-brand-mark { width: 32px; height: 34px; flex-basis: 32px; }
  .ef-events-refresh [data-member-toolbar] .ef-topbar { gap: 4px; }
  .ef-events-refresh .ef-topbar-btn { width: 32px; height: 32px; }
  .ef-member-ticket-banner { grid-template-columns: 32px minmax(0,1fr); }
  .ef-member-ticket-banner .ef-ticket-remaining { grid-column: 2; justify-self: start; }
}
@media(prefers-reduced-motion:reduce) {
  .ef-events-refresh *, .ef-event-sheet * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
.ef-appointment-heading h1 { font: 500 clamp(32px, 4vw, 48px)/1.15 var(--ef-serif, Georgia, serif); margin: 8px 0 12px; }
.ef-appointment-heading p { max-width: 620px; color: #60726a; line-height: 1.6; }
.ef-appointment-schedule, .ef-appointment-create, .ef-appointment-results { padding: 28px; }
.ef-appointment-guest { width: 100%; }
.ef-appointment-guest .ef-text-action { color: #d9eee5; }
.ef-appointment-dashboard h2 { color: #193e31; text-align: left; margin: 0 0 10px; font-size: 22px; }
.ef-appointment-schedule-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.ef-appointment-schedule-head > div { flex: 1; min-width: 0; }
.ef-appointment-dashboard .ef-text-action { width: auto; flex-shrink: 0; box-shadow: none; background: transparent; padding: 8px 0; }
.ef-appointment-slots { padding: 0; margin: 24px 0 0; list-style: none; }
.ef-appointment-slot { display: grid; grid-template-columns: 85px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 22px 0; border-top: 1px solid #e0e8e3; }
.ef-appointment-time, .ef-appointment-person > div { display: grid; gap: 6px; }
.ef-appointment-time strong { font-size: 20px; }
.ef-appointment-time span, .ef-appointment-person span { font-size: 13px; color: #677b70; }
.ef-appointment-person { display: flex; gap: 14px; align-items: center; min-width: 0; }
.ef-appointment-person img, .ef-appointment-empty { width: 52px; height: 52px; flex-shrink: 0; border-radius: 15px; object-fit: cover; }
.ef-appointment-empty { display: grid; place-items: center; background: #edf3ef; border: 1px dashed #9db8a9; font-size: 26px !important; }
.ef-appointment-actions { display: flex; align-items: center; gap: 12px; }
.ef-appointment-actions label { font-size: 12px; color: #60726a; flex: 0 0 auto; }
.ef-appointment-actions select { display: block; width: 88px; min-width: 88px; padding: 7px; margin: 4px 0 0; }
.ef-appointment-footer { border-top: 1px solid #e0e8e3; padding-top: 20px; display: grid; gap: 12px; }
.ef-appointment-footer p { margin: 0; line-height: 1.5; }
.ef-appointment-create select { width: 100%; margin: 12px 0 18px; padding: 14px; }
.ef-appointment-dashboard .ef-button { min-height: 44px; }
.ef-appointment-review-list { list-style: none; margin: 16px 0; padding: 0; }
.ef-appointment-review-list li { display: flex; align-items: center; gap: 20px; padding: 14px 0; border-bottom: 1px solid #e0e8e3; }
@media (max-width: 640px) {
  .ef-appointment-schedule, .ef-appointment-create, .ef-appointment-results { padding: 18px; }
  .ef-appointment-slot { grid-template-columns: 65px minmax(0, 1fr); gap: 12px; }
  .ef-appointment-actions { grid-column: 2; flex-wrap: wrap; }
  .ef-appointment-schedule-head { flex-direction: column; }
  .ef-appointment-person img, .ef-appointment-empty { width: 42px; height: 42px; }
}

/* The "needs people" banner sits above the ticket strip on the events screen.
   Same shape as that banner so the two stack without a seam; a warm tint is the
   only difference, because it is asking for something rather than confirming. */
.ef-member-ticket-banner.ef-event-needs-people { background: #fff8ec; }
.ef-event-needs-people .ef-ticket-icon { color: #8a6414; }
.ef-event-needs-people strong { color: #6b4c0c; }

/* Events as a snap rail rather than a grid.
   A grid of two columns made every evening look equally important and pushed
   the soonest one off the top on a phone. A rail puts one decision in front of
   the member at a time, with the action bar below always describing the card
   they are actually looking at.

   No negative margin to bleed past the feed: .ef-event-feed's side padding is
   0 on desktop and 14px on mobile, so any single inset here is wrong in one of
   the two. The trailing padding is what keeps the last card off the edge. */
.ef-event-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ef-event-rail::-webkit-scrollbar { display: none; }
.ef-event-rail > .ef-event-listing { scroll-snap-align: center; flex: 0 0 min(340px, 88%); }
.ef-event-dots { display: flex; gap: 6px; justify-content: center; align-items: center; height: 12px; margin-top: 10px; }
.ef-event-dots button { height: 5px; width: 5px; padding: 0; min-height: 0; border: 0; border-radius: 999px;
  background: #d5d4cd; transition: width .18s ease; cursor: pointer; }
.ef-event-dots button[aria-current='true'] { width: 18px; background: var(--ef-teal); }

/* Sticky, not fixed, and modelled on .ef-decide: `bottom: 0` already parks it
   exactly on top of the mobile navigation, because a sticky offset measures
   against the scrollport reduced by .ef-main's padding and that padding IS
   --ef-bottom-chrome. Adding a safe-area inset here would double-count it and
   float the bar a whole chrome-height too high. z-index matches .ef-decide:
   above all page content, below the nav (8995) and the membership CTA (8994).

   It is rendered as the LAST child of .ef-event-feed, not under the dots where
   it appears. A bottom-sticky element is pulled up into view only while its
   containing block still extends below it, so sitting directly under the rail
   gave it no sticky range at all and it simply scrolled away with the cards —
   measured at 143px above the navigation instead of pinned to it. */
.ef-event-actionbar { position: sticky; z-index: 8993; bottom: 0; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 16px 16px 0 0;
  border-top: 1px solid var(--ef-line); background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }
.ef-event-actionbar-meta { flex: 1; min-width: 0; }
.ef-event-actionbar-meta strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; }
.ef-event-actionbar-meta span { display: block; font-size: 12.5px; color: var(--ef-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* `width: auto` is the fix, not decoration: the base .ef-button is width:100%,
   and `flex: 0 0 auto` takes that as its basis — the button claimed the whole
   row and crushed the label beside it to nothing. */
#screen-event-first .ef-event-actionbar .ef-button { flex: 0 0 auto; width: auto; margin: 0; min-width: 0; min-height: 44px; padding: 10px 15px; border: 1.5px solid #1c4c3b; border-radius: 999px; background: #fff; color: #1c4c3b; font-size: .875rem; font-weight: 700; box-shadow: none; white-space: nowrap; }
/* The booking button is the one that earns money; it is solid and lifted so
   nobody has to look for it. Everything else in the bar stays outlined. */
#screen-event-first .ef-event-actionbar .ef-button[data-member-book], #screen-event-first .ef-event-actionbar .ef-button[data-member-join] { min-height: 50px; padding: 12px 22px; background: #1c4c3b; color: #fff; font-size: 1rem; font-weight: 800; box-shadow: 0 6px 18px rgba(28,76,59,.28); }
#screen-event-first .ef-event-actionbar .ef-event-info, #screen-event-first .ef-event-actionbar .ef-event-share { flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--ef-line); border-radius: 50%; background: #fff; color: #1c4c3b; display: grid; place-items: center; box-shadow: none; cursor: pointer; }
#screen-event-first .ef-event-actionbar { gap: 8px; }
#screen-event-first .ef-event-actionbar .ef-button[data-member-book], #screen-event-first .ef-event-actionbar .ef-button[data-member-join] { padding-inline: 16px; }
.ef-event-sheet-actions .ef-button-secondary[data-member-share] { border-color: #0f766e; color: #0f766e; }

/* One-to-one return (docs/ONE_TO_ONE_RETURN_PLAN.md §3a): the free-request
   counter under the card CTA and the one-screen composer's suggested times. */
.ef-send-trial { display: block; margin: 8px 0 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--ef-teal-deep); }
.ef-send-trial.is-empty { color: var(--ef-muted); font-weight: 600; }
.ef-meet-trial { margin: 10px 0 0; font-size: 12px; font-weight: 700; color: var(--ef-teal-deep); }
.ef-meet-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.ef-meet-slot { appearance: none; margin: 0; min-height: 44px; padding: 8px 10px; border-radius: 12px; border: 1.5px solid rgba(31,85,70,.22); background: #fff; color: var(--ef-ink, #1c2a25); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.ef-meet-slot.is-selected { border-color: var(--ef-teal-deep); background: rgba(31,85,70,.08); color: var(--ef-teal-deep); }
.ef-meet-slot-other { font-weight: 600; color: var(--ef-muted); }
.ef-meet-slot-other.is-selected { color: var(--ef-teal-deep); }

/* The background filter on the deck (owner's mockup, 24 September 2026).
   Ethnicity is the single biggest reason members pass, so the control sits
   under the heading where the passing happens, not in settings. */
.ef-filter-bar { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; }
.ef-filter-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; flex: 1 1 auto; min-width: 0;
  padding: 8px 14px; border-radius: 999px; border: 1.5px solid rgba(31,85,70,.18); background: #fff;
  color: var(--ef-ink, #1c2a25); font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.ef-filter-pill:hover { border-color: rgba(31,85,70,.34); }
.ef-filter-icon { display: inline-flex; color: var(--ef-teal-deep); flex: 0 0 auto; }
.ef-filter-label { color: var(--ef-muted); flex: 0 0 auto; }
/* The chosen backgrounds are the point of the pill, so they take the slack and
   ellipsis rather than pushing the count and chevron off a narrow phone. */
.ef-filter-value { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.ef-filter-count { flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--ef-teal-deep); color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.ef-filter-chevron { display: inline-flex; color: var(--ef-muted); flex: 0 0 auto; }
/* Chosen but not applied: their selection is stored, the deck is not filtered. */
.ef-filter-count.is-locked { background: transparent; color: var(--ef-muted); }

.ef-filter-locked-note { margin-top: -4px; }
.ef-filter-any { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 4px;
  padding: 12px 14px; border-radius: 14px; background: rgba(31,85,70,.05); cursor: pointer; }
.ef-filter-any > span { display: flex; flex-direction: column; gap: 2px; }
.ef-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.ef-filter-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid rgba(31,85,70,.2); background: #fff; font-size: 14px; cursor: pointer; }
.ef-filter-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.ef-filter-chip.is-on { background: var(--ef-teal-deep); border-color: var(--ef-teal-deep); color: #fff; font-weight: 700; }
.ef-filter-chip.is-on span::before { content: "✓ "; }
.ef-filter-actions { display: flex; gap: 10px; margin-top: 18px; }
/* `.ef-button` is width:100% for a card CTA. Two of them in a flex row makes the
   FIRST claim the whole row and push the second outside the sheet — which is
   what shipped: Clear filled the footer and the apply button sat 91px past the
   right edge, so the filter could not be applied at all. Both were "visible" to
   a selector throughout, which is why only a geometry assertion catches it.
   These are sheet buttons, not card CTAs: shorter, tighter, lighter. */
.ef-filter-actions .ef-button { width: auto; flex: 1 1 0; min-width: 0; min-height: 44px;
  border-radius: 12px; padding: 10px 16px; font-weight: 700; font-size: 15px; }
.ef-filter-actions .ef-button-secondary { flex: 0 1 auto; min-width: 96px; }
/* The number on each chip: quiet, never competing with the background's name. */
.ef-filter-note { margin-top: 8px; font-size: 12.5px; }

/* Running out of profiles (5 Oct 2026): widen the age range; nudge to request. */
.ef-widen-card { padding: 14px 16px; margin: 10px auto 0; border-left: 4px solid var(--ef-accent, #0f766e); }
.ef-widen-card .ef-subtitle { margin-top: 4px; }
.ef-widen-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ef-widen-options .ef-button { width: auto; flex: 1 1 140px; min-height: 44px; border-radius: 12px; }
.ef-pass-streak-hint { margin: 10px auto 0; font-size: 13px; color: var(--ef-muted); text-align: center; }

/* Ethnicity and Age side by side (7 Oct 2026): two equal pills on one row. */
.ef-filter-bar > .ef-filter-pill { flex: 1 1 0; }
.ef-filter-bar .ef-filter-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ef-age-range { display: flex; gap: 12px; margin-top: 8px; }
.ef-age-range label { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.ef-age-range select { min-height: 44px; border-radius: 12px; padding: 0 10px; }
.ef-welcome-list { margin: 12px 0 0; padding-left: 20px; text-align: left; }
.ef-welcome-list li { margin: 4px 0; }
/* Refund request form (8 Oct 2026). */
.ef-refund-q { border: 0; padding: 0; margin: 12px 0 0; }
.ef-refund-q legend { font-weight: 600; margin-bottom: 6px; }
.ef-refund-yn { display: inline-flex; gap: 6px; align-items: center; margin-right: 18px; min-height: 36px; }
.ef-refund-ack { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; line-height: 1.4; }
.ef-refund-ack input { margin-top: 3px; flex: 0 0 auto; }
.ef-refund-help { margin-top: 16px; padding: 12px; border-radius: 12px; background: var(--ef-surface-2, rgba(0,0,0,.04)); display: grid; gap: 8px; }
.ef-refund-help p { margin: 0; }
/* Where do you live? (9 Oct 2026). Asked in Members, never in sign-up. */
.ef-home { display: grid; gap: 14px; max-width: 460px; margin: 8px auto 24px; }
.ef-home .ef-button { display: inline-flex; justify-content: center; align-items: center; gap: 10px; }
.ef-home-or { display: flex; align-items: center; gap: 10px; color: var(--ef-muted); font-size: 13px; }
.ef-home-or::before, .ef-home-or::after { content: ""; flex: 1; height: 1px; background: var(--ef-line); }
.ef-home-field { position: relative; display: grid; gap: 6px; }
.ef-home-field label, .ef-home > label { font-weight: 700; font-size: 14px; }
.ef-home-suggestions { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--ef-card); border: 1px solid var(--ef-line); border-radius: 12px; box-shadow: var(--ef-shadow); max-height: 260px; overflow-y: auto; z-index: 5; }
.ef-home-suggestions button { display: block; width: 100%; text-align: left; font: inherit; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--ef-line); background: transparent; color: var(--ef-ink); cursor: pointer; }
.ef-home-suggestions button:last-child { border-bottom: 0; }
.ef-home-suggestions button:hover, .ef-home-suggestions button:focus-visible { background: var(--ef-teal-soft); }
.ef-home-found { background: var(--ef-card); border: 1px solid var(--ef-line); border-radius: 16px; padding: 18px; display: grid; gap: 12px; }
.ef-home-found .ef-muted { display: inline-flex; align-items: center; gap: 6px; }
.ef-home-place { font-family: var(--ef-serif); font-weight: 500; font-size: 24px; }
.ef-home-notice { background: var(--ef-gold-soft); border-radius: 16px; padding: 18px; display: grid; gap: 10px; }

/* Photo-first profile card (owner, 9 Oct 2026). The photo decides: it fills most
   of the phone screen above the dock; the name is shown once, on it, with job,
   town, height, their own tags and "Active this week". The compatibility story
   begins beneath the full-bleed portrait; the dock stays sticky. */
.ef-letter-title.ef-deck-kicker { font-size: 15px; font-style: italic; color: var(--ef-teal-deep); margin: 0; line-height: 1.3; }
.ef-deck-card { overflow: hidden; }
.ef-deck-card .ef-portrait { width: calc(100% + 40px); aspect-ratio: 2 / 3; max-height: 70vh; margin: 10px -20px -20px; border-radius: 0 0 21px 21px; }
.ef-deck-card .ef-portrait-veil { padding-top: 64px; }
.ef-deck-card .ef-portrait-veil .ef-veil-name { font-size: 30px; line-height: 1.05; }
.ef-active-badge { position: absolute; z-index: 4; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(250,247,240,.94); color: var(--ef-teal-deep); font-size: 11px; font-weight: 800; pointer-events: none; }
.ef-active-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ef-teal); }
.ef-veil-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ef-veil-tag { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; background: var(--ef-gold-soft); color: var(--ef-ink); font-size: 10px; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.ef-veil-tag.ef-veil-tag-more { background: rgba(250,247,240,.2); color: var(--ef-paper); }
/* Current Members card only: one factual profile, over a full-width portrait.
   The photo retains its original frame while the reading area grows in flow. */
.ef-deck-card { container-type: inline-size; }
.ef-deck-card .ef-photo-card { --ef-photo-height: min(70vh, calc(150cqw + 60px)); display: flex; flex-direction: column; aspect-ratio: auto; max-height: none; min-height: var(--ef-photo-height); padding-top: max(240px, calc(var(--ef-photo-height) - 230px)); box-sizing: border-box; background: var(--ef-teal-deep); }
.ef-photo-card .ef-gallery-track { height: var(--ef-photo-height); bottom: auto; }
.ef-photo-card .ef-gallery-arrow { top: calc(var(--ef-photo-height) / 2); width: 44px; height: 44px; }
.ef-photo-card > .ef-mono { position: absolute; top: 100px; align-self: center; color: var(--ef-paper); font: 400 15px 'DM Sans', sans-serif; }
.ef-deck-card .ef-photo-info { position: relative; inset: auto; margin-top: auto; padding: 48px 18px 14px; pointer-events: auto; background: linear-gradient(180deg, transparent, rgba(16,38,29,.96) 48px, #10261d 100%); color: #fffaf0; text-align: left; overflow-wrap: anywhere; }
.ef-photo-info .ef-veil-name { text-wrap: balance; }
.ef-photo-overview { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 10px 0 0; font-size: 14px; line-height: 1.5; }
.ef-photo-overview span:not(:last-child)::after { content: '·'; padding: 0 8px; color: #d7b76a; }
.ef-photo-verified { display: block; margin-top: 5px; font-size: 12px; }
.ef-photo-interests { display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,250,240,.25); font-size: 13px; line-height: 1.85; }
.ef-photo-interests span { max-width: 100%; }
.ef-photo-interests span::before { content: '•'; color: #e1bd69; padding-right: 6px; }
.ef-photo-info [hidden] { display: none !important; }
.ef-photo-facts section { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,250,240,.22); }
.ef-photo-facts h3 { margin: 0 0 12px; color: #fffaf0; text-align: left; font: 500 20px/1.25 var(--ef-serif); }
.ef-photo-facts dl { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 20px; margin: 0; }
.ef-photo-facts dt { color: #c7d5cd; font-size: 12px; line-height: 1.4; }
.ef-photo-facts dd { color: #fffaf0; margin: 3px 0 0; font-size: 14px; line-height: 1.45; }
.ef-photo-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; }
#screen-event-first .ef-photo-actions button { min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: #fffaf0; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.ef-photo-actions button:last-child { margin-left: auto; }
.ef-photo-actions button:focus-visible { outline: 3px solid #f4ca68; outline-offset: 4px; border-radius: 3px; }
.ef-photo-facts:not([hidden]) { animation: ef-photo-facts-in .2s ease; }
@keyframes ef-photo-facts-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ef-photo-facts:not([hidden]) { animation: none; } }
@container (max-width: 300px) { .ef-photo-facts dl { grid-template-columns: 1fr; } }
.ef-compat-story { width: 100%; box-sizing: border-box; margin-top: 12px; padding: 20px; border: 1px solid rgba(42,107,87,.22); border-radius: 20px; background: linear-gradient(145deg, var(--ef-paper), #fffdf8); color: var(--ef-ink); box-shadow: 0 10px 30px rgba(31,85,70,.08); }
.ef-compat-story-heading { display: flex; align-items: center; gap: 10px; }
.ef-compat-story-heading h3, .ef-compat-story--status h3 { margin: 0; color: var(--ef-teal-deep); font: 500 24px/1.15 var(--ef-serif); letter-spacing: -.01em; text-wrap: balance; }
.ef-compat-story-mark { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; background: var(--ef-gold-soft); color: #a87918; font-size: 18px; }
.ef-compat-story-summary { max-width: 52ch; margin: 12px 0 14px; color: #31483d; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.ef-compat-story-section > h4, .ef-compat-story-questions > h4 { margin: 17px 0 8px; color: var(--ef-teal-deep); font: 500 19px/1.25 var(--ef-serif); }
.ef-compat-story-reasons { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ef-compat-story-reasons li { position: relative; padding-left: 26px; color: #3f5048; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ef-compat-story-reasons li::before { content: '✓'; position: absolute; top: 1px; left: 0; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #dceee4; color: var(--ef-teal-deep); font-size: 11px; font-weight: 900; }
.ef-compat-story-caution { display: flex; align-items: flex-start; gap: 10px; margin-top: 15px; padding-top: 14px; border-top: 1px solid rgba(42,107,87,.14); }
.ef-compat-story-caution > span { display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--ef-gold); color: #4b3500; font-size: 12px; font-weight: 900; }
.ef-compat-story-caution p { margin: 0; color: #4b504c; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.ef-compat-story-caution b { display: block; margin-bottom: 2px; color: #8a6414; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ef-compat-story-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .2s ease, opacity .18s ease; }
.ef-compat-story-more > div { min-height: 0; overflow: hidden; }
.ef-compat-story.is-expanded .ef-compat-story-more { grid-template-rows: 1fr; opacity: 1; }
.ef-compat-story-topics { display: grid; gap: 0; margin-top: 17px; border-top: 1px solid rgba(42,107,87,.14); }
.ef-compat-story-topics article { padding: 13px 0; border-bottom: 1px solid rgba(42,107,87,.12); }
.ef-compat-story-topics h4 { margin: 0 0 4px; color: var(--ef-teal-deep); font: 500 17px/1.25 var(--ef-serif); }
.ef-compat-story-topics p { margin: 0; color: #526159; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.ef-compat-story-questions { margin-top: 17px; padding-top: 1px; }
.ef-compat-story-questions ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ef-compat-story-questions li { position: relative; min-height: 44px; padding: 11px 36px 11px 38px; border: 1px solid rgba(42,107,87,.16); border-radius: 999px; background: rgba(255,255,255,.72); color: #43544b; font-size: 12.5px; line-height: 1.45; }
.ef-compat-story-questions li::before { content: '?'; position: absolute; top: 11px; left: 14px; display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--ef-teal); border-radius: 50%; color: var(--ef-teal-deep); font-size: 11px; font-weight: 800; }
.ef-compat-story-foot { margin: 16px 0 0; color: var(--ef-muted); font-size: 11.5px; line-height: 1.5; text-align: center; }
.ef-compat-story-toggle { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 17px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--ef-teal-deep); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .16s ease, transform .16s ease; }
.ef-compat-story-toggle:hover { background: #184639; transform: translateY(-1px); }
.ef-compat-story-toggle:focus-visible { outline: 3px solid rgba(230,177,61,.62); outline-offset: 3px; }
.ef-compat-story-chevron { font-size: 22px; line-height: 1; transition: transform .2s ease; }
.ef-compat-story.is-expanded .ef-compat-story-chevron { transform: rotate(-90deg); }
.ef-compat-story--status { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.ef-compat-story--status h3 { font-size: 18px; }
.ef-compat-story--status p { margin: 3px 0 0; color: var(--ef-muted); font-size: 12.5px; line-height: 1.45; }
.ef-compat-story-status { margin-block: 16px; padding: 0 4px; color: var(--ef-muted); font-size: 14px; line-height: 1.5; text-align: left; }
@media (max-width: 420px) {
  .ef-compat-story { padding: 17px 15px; border-radius: 18px; }
  .ef-compat-story-heading h3 { font-size: 22px; }
  .ef-compat-story-questions li { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ef-compat-story-more, .ef-compat-story-toggle, .ef-compat-story-chevron { transition: none; }
}
.ef-more-title { font-family: var(--ef-serif); font-weight: 500; font-size: 22px; margin: 0 0 12px; scroll-margin-top: 16px; }
.ef-decide .ef-send-trial { margin: 0 0 6px; }
.ef-meet-openers { display: grid; gap: 6px; margin-bottom: 8px; }
.ef-meet-opener { min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--ef-line); background: var(--ef-card); color: var(--ef-ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.ef-meet-opener:hover, .ef-meet-opener:focus-visible { border-color: var(--ef-teal); }
.ef-veil-chip.ef-veil-ethnicity { font-size: 11px; }
.ef-veil-flag { font-size: 13px; line-height: 1; }
/* "A little something about …" is the pair of "What … is looking for" on the deck
   (owner, 9 Oct 2026): straight after it, same card shape, gold instead of teal. */
#ef-more-about .ef-profile-hidden-fact { gap: 13px; margin: 0 0 15px; padding: 18px; border-radius: 18px; border: 1px solid rgba(197,159,57,.32); background: linear-gradient(135deg, #fff8e5, #faf7f0); box-shadow: 0 8px 24px rgba(20,61,48,.06); }
#ef-more-about .ef-profile-hidden-fact-kicker { margin: 0 0 7px; color: #7a5d16; font-family: var(--ef-serif); font-size: 18px; font-weight: 600; letter-spacing: 0; text-transform: none; }
#ef-more-about .ef-profile-hidden-fact-text { margin: 0; color: var(--ef-ink); font-family: var(--ef-serif); font-size: 16px; font-style: italic; font-weight: 500; line-height: 1.55; }
.ef-profile-dealbreakers { display: flex; align-items: flex-start; gap: 13px; margin: 0 0 15px; padding: 18px; border-radius: 18px; border: 1px solid rgba(42,107,87,.2); background: linear-gradient(135deg, #eef5f1, #faf7f0); box-shadow: 0 8px 24px rgba(20,61,48,.06); }
.ef-profile-dealbreakers-mark { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: var(--ef-teal); color: #fff; font-size: 15px; font-weight: 800; }
.ef-profile-dealbreakers-kicker { margin: 0 0 7px; color: var(--ef-teal-deep); font-family: var(--ef-serif); font-size: 18px; font-weight: 600; }
.ef-profile-dealbreakers-text { margin: 0; color: var(--ef-ink); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }

/* Live figures (owner, 9 Oct 2026): video intros requested · couples matched.
   The strip sits at the very top of Members, away from the card, so it can never
   read as one person's numbers; the panel leads the membership sheet. */
.ef-live-strip { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 10px; padding: 9px 14px; border-radius: 12px; background: var(--ef-teal-soft); color: var(--ef-teal-deep); font-size: 12.5px; line-height: 1.35; text-align: center; }
/* On a phone the round refresh / chat / log-out buttons are fixed top-right over
   the content (owner's screenshot, 9 Oct 2026). The strip sits to their left as
   two short lines, and its slot keeps that row clear even when the figures
   cannot be read, so nothing below ever slides under the buttons. */
@media (max-width: 767px) {
  [data-ef-live-slot="strip"] { min-height: 50px; }
  .ef-live-strip { justify-content: flex-start; width: fit-content; max-width: calc(100% - 140px); min-height: 38px; margin: 0 0 12px; padding: 6px 12px; text-align: left; box-sizing: border-box; }
  .ef-live-lines > span:not(.ef-live-sep) { display: block; }
  .ef-live-sep, .ef-live-word { display: none; }
}
.ef-live-strip strong { font-weight: 800; }
.ef-live-strip .ef-live-gold { color: #8a6413; }
.ef-live-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--ef-teal); box-shadow: 0 0 0 3px rgba(42,107,87,.18); }
.ef-live-panel { margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; background: #1F3D33; color: #F7F3EA; }
.ef-live-panel .ef-live-dot { background: #5FD39A; box-shadow: 0 0 0 3px rgba(95,211,154,.2); }
.ef-live-kicker { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #C9D6CF; }
.ef-live-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.ef-live-figures > div + div { border-left: 1px solid rgba(201,214,207,.25); padding-left: 12px; }
.ef-live-figures b { display: block; font-family: var(--ef-serif); font-size: 30px; font-weight: 600; line-height: 1; }
.ef-live-figures small { display: block; margin-top: 4px; font-size: 12px; color: #C9D6CF; }
.ef-live-panel .ef-live-gold { color: #E3B35A; }

/* Me, redesigned (owner, 10 Oct 2026): the member first, one small membership
   box, then short groups of one-line rows. */
.ef-me { max-width: 640px; margin: 0 auto; display: grid; gap: 18px; }
.ef-me-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 14px; align-items: center; }
.ef-me-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--ef-teal-soft); color: var(--ef-teal-deep); display: grid; place-items: center; font-family: var(--ef-serif); font-size: 26px; font-weight: 600; }
.ef-me-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ef-me-head h2 { margin: 0; font-family: var(--ef-serif); font-size: 24px; line-height: 1.15; color: var(--ef-ink); }
.ef-me-head p { margin: 2px 0 0; color: var(--ef-muted); font-size: 14px; }
.ef-me-chip { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--ef-gold-soft); color: #7a5810; }
.ef-me-chip[data-done="true"] { background: var(--ef-teal-soft); color: var(--ef-teal-deep); }
.ef-me-head .ef-me-edit { grid-column: 1 / -1; margin-top: 6px; }
.ef-me-plan { display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: var(--ef-card); border: 1px solid var(--ef-line); }
.ef-me-plan[data-member="true"] { background: var(--ef-teal-deep); border-color: var(--ef-teal-deep); color: #fff; }
.ef-me-plan-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.ef-me-plan-top strong { font-size: 17px; }
.ef-me-plan-top span { font-size: 13px; color: var(--ef-muted); font-variant-numeric: tabular-nums; }
.ef-me-plan[data-member="true"] .ef-me-plan-top span, .ef-me-plan[data-member="true"] p { color: #d9ece4; }
.ef-me-plan p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ef-muted); }
.ef-me-plan p b { color: var(--ef-ink); }
.ef-me-meter { display: flex; gap: 6px; }
.ef-me-meter i { flex: 1; height: 6px; border-radius: 6px; background: var(--ef-teal); }
.ef-me-meter i[data-used="true"] { background: var(--ef-line); }
.ef-me-group h3 { margin: 0 4px 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ef-muted); }
.ef-me-list { background: var(--ef-card); border: 1px solid var(--ef-line); border-radius: 16px; overflow: hidden; }
.ef-me-list .ef-setting { padding: 13px 16px; min-height: 52px; gap: 14px; }
.ef-me-list .ef-setting > div { min-width: 0; }
.ef-me-list .ef-setting strong { font-size: 14.5px; }
.ef-me-list .ef-setting .ef-button { width: auto; flex: none; min-height: 36px; padding: 6px 14px; font-size: 13px; }
.ef-me-link { width: 100%; font: inherit; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--ef-line); color: var(--ef-ink); cursor: pointer; text-decoration: none; }
.ef-me-link:last-child { border-bottom: 0; }
.ef-me-link em { font-style: normal; color: var(--ef-muted); font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.ef-me-link em::after { content: '›'; font-size: 20px; line-height: 1; color: #a5b2ab; }
.ef-me-link:focus-visible { outline: 3px solid var(--ef-gold); outline-offset: -3px; }
.ef-me-danger { color: var(--ef-danger); font-weight: 600; }
.ef-me-foot { margin: 6px 4px 0; font-size: 12px; color: var(--ef-muted); }
.ef-me-told { display: block; }
.ef-me, .ef-me h2, .ef-me h3, .ef-me p { text-align: left; }
/* The floating refresh / help / log-out buttons sit top right: start below them. */
.ef-me { padding-top: 58px; }
/* Link rows are <button>s: drop the app's general button chrome. */
#screen-event-first .ef-me .ef-me-list .ef-me-link { box-shadow: none; border-radius: 0; background: transparent; margin: 0; min-height: 52px; font-weight: inherit; transform: none; }
#screen-event-first .ef-me .ef-me-list .ef-me-link:hover { background: var(--ef-teal-soft); }
#screen-event-first .ef-me .ef-me-list .ef-me-link .ef-me-danger { display: inline; margin: 0; font-size: inherit; color: var(--ef-danger); font-weight: 700; }

/* Membership help: a route to us easier to find than a PayPal dispute (10 Oct 2026). */
.ef-me-problem { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(42,107,87,.22); border-radius: 14px; background: #fff; color: var(--ef-ink); text-align: left; cursor: pointer; font: inherit; }
.ef-me-problem-icon { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--ef-teal-soft); color: var(--ef-teal-deep); font-weight: 800; }
.ef-me-problem strong { display: block; font-size: 14px; }
.ef-me-problem small { display: block; margin-top: 2px; color: var(--ef-muted); font-size: 12.5px; }
.ef-me-problem em { margin-left: auto; color: var(--ef-muted); font-style: normal; font-size: 20px; }
.ef-problem-option { display: flex; flex-direction: column; gap: 2px; width: 100%; margin: 0 0 10px; padding: 14px 16px; border: 1px solid var(--ef-line, #e2e8e3); border-radius: 14px; background: #fff; text-align: left; font: inherit; color: var(--ef-ink); }
.ef-problem-option strong { font-size: 15px; } .ef-problem-option span { color: var(--ef-muted); font-size: 13px; }
.ef-problem-title { color: var(--ef-teal-deep); font-family: var(--ef-serif); }
.ef-problem-lead { margin: 6px 0 16px; }

/* One-payment plans (preview, 12 Oct 2026) */
.ef-pass-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 2px 0 6px; }
.ef-pass-option { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 6px 10px; border: 1.5px solid var(--ef-line, #dfe6e1); border-radius: 14px; background: #fff; cursor: pointer; text-align: center; }
.ef-pass-option input { position: absolute; opacity: 0; pointer-events: none; }
.ef-pass-option.is-selected { border-color: var(--ef-teal); background: #edf4ef; box-shadow: 0 0 0 1px var(--ef-teal) inset; }
.ef-pass-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: var(--ef-teal); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .02em; }
.ef-pass-option[data-ef-pass-option="6m"] .ef-pass-badge { background: var(--ef-gold); color: #3d300c; }
.ef-pass-term { font-size: 12.5px; font-weight: 700; color: var(--ef-ink); }
.ef-pass-price { font-family: var(--ef-serif); font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--ef-ink); }
.ef-pass-per { font-size: 10.5px; color: var(--ef-muted); }
.ef-pass-note { margin: 0 0 8px; text-align: center; font-size: 12px; font-weight: 700; color: var(--ef-teal-deep); }

.ef-pass-sdk { display: grid; gap: 8px; margin: 2px 0 4px; min-height: 48px; }
/* With PayPal's buttons (and its card form, which grows in place) the whole
   sheet scrolls as one, rather than a fixed footer clipping the form. */
.ef-membership-sheet.ef-has-pass-checkout, .ef-membership-sheet.ef-has-pass-sdk { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ef-membership-sheet.ef-has-pass-checkout > *, .ef-membership-sheet.ef-has-pass-sdk > * { flex-shrink: 0; }
.ef-membership-sheet.ef-has-pass-checkout .ef-membership-scroll, .ef-membership-sheet.ef-has-pass-sdk .ef-membership-scroll { flex: 0 0 auto; overflow: visible; }
.ef-membership-sheet.ef-has-pass-checkout .ef-membership-footer, .ef-membership-sheet.ef-has-pass-sdk .ef-membership-footer { box-shadow: none; }

/* Light one-payment checkout (owner reference, 12 Oct 2026). Recurring
   membership keeps the established dark hero and compact modal above. */
.ef-membership-sheet.ef-has-pass-checkout { --ef-pass-paper: #fbfaf6; --ef-pass-sage: #eef5f0; --ef-pass-green: #174d3d; --ef-pass-gold: #b77d36; background: var(--ef-pass-paper); color: #20352d; }
.ef-has-pass-checkout .ef-membership-close { top: 14px; right: 16px; width: 38px; height: 38px; border-radius: 50%; background: #eef3ef; color: #36544a; }
.ef-has-pass-checkout .ef-membership-pass-hero { padding: 17px 24px 10px; background: transparent; color: #20352d; overflow: visible; }
.ef-has-pass-checkout .ef-membership-pass-hero::after { display: none; }
.ef-membership-brand { display: flex; align-items: center; gap: 9px; min-height: 34px; margin: 0 50px 14px 0; color: var(--ef-pass-green); }
.ef-membership-brand > span { font-family: var(--ef-serif); font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.ef-membership-brand i { color: #c99a52; font-style: normal; }
.ef-membership-brand b { font-family: var(--ef-serif); font-size: 17px; font-weight: 600; }
.ef-has-pass-checkout .ef-membership-eyebrow { margin: 0 0 4px; color: #6c8178; font-size: 10px; letter-spacing: .15em; }
.ef-has-pass-checkout .ef-membership-pass-hero h2 { margin: 0; color: var(--ef-pass-green); font-size: 30px; font-weight: 600; line-height: 1.03; }
.ef-has-pass-checkout .ef-membership-pass-hero h2 span, .ef-has-pass-checkout .ef-membership-pass-hero h2 strong { display: block; }
.ef-has-pass-checkout .ef-membership-pass-hero h2 strong { color: var(--ef-pass-gold); font-weight: 600; }
.ef-has-pass-checkout .ef-membership-hero .ef-membership-expect { max-width: none; margin: 9px 0 0; color: #617168; font-size: 13px; line-height: 1.42; text-align: left; }
.ef-has-pass-checkout .ef-membership-scroll { padding: 3px 24px 18px; }
.ef-has-pass-checkout .ef-live-panel { margin: 0 0 11px; padding: 12px 15px; border: 1px solid #d8e7dc; border-radius: 16px; background: var(--ef-pass-sage); color: var(--ef-pass-green); }
.ef-has-pass-checkout .ef-live-panel .ef-live-dot { display: none; }
.ef-has-pass-checkout .ef-live-kicker { color: #668077; }
.ef-has-pass-checkout .ef-live-figures { gap: 14px; margin-top: 7px; }
.ef-has-pass-checkout .ef-live-figures > div + div { border-left-color: #cfded3; }
.ef-has-pass-checkout .ef-live-figures b { color: var(--ef-pass-green); font-size: 27px; }
.ef-has-pass-checkout .ef-live-panel .ef-live-gold { color: var(--ef-pass-green); }
.ef-has-pass-checkout .ef-live-figures small { color: #65756d; font-size: 10.5px; }
.ef-pass-recent-people { display: flex; align-items: center; justify-content: center; gap: 10px; margin: -3px 0 12px; color: #36594c; }
.ef-pass-recent-faces { display: flex; padding-left: 8px; }
.ef-pass-recent-faces img { width: 34px; height: 34px; margin-left: -8px; border: 3px solid #fbfaf5; border-radius: 50%; object-fit: cover; background: #dcebe3; box-shadow: 0 1px 4px rgba(24,76,61,.16); }
.ef-pass-recent-people b, .ef-pass-recent-people small { display: block; }
.ef-pass-recent-people b { font-size: 11px; }
.ef-pass-recent-people small { margin-top: 1px; color: #718078; font-size: 9px; }
.ef-pass-benefit-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; margin: 8px 0 0; color: #36594c; font-size: 11px; font-weight: 700; }
.ef-pass-benefit-summary span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ef-pass-benefit-summary i { width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; background: #dfeee5; color: #28755c; font-size: 9px; font-style: normal; }
.ef-pass-benefit-summary span:last-child { grid-column: 1 / -1; }
.ef-has-pass-checkout .ef-membership-note { margin-top: 6px; font-size: 10.5px; line-height: 1.42; }
.ef-pass-choice-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 13px 0 7px; }
.ef-pass-choice-head h3 { margin: 0; color: #24382f; font-size: 15px; }
.ef-pass-choice-head span { color: #7b8781; font-size: 10px; }
.ef-has-pass-checkout .ef-pass-options { grid-template-columns: 1fr; gap: 7px; margin: 0; }
.ef-has-pass-checkout .ef-pass-option { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 0 10px; align-items: center; min-height: 64px; padding: 10px 13px; border: 1px solid #d9e2dc; border-radius: 13px; text-align: left; }
.ef-has-pass-checkout .ef-pass-option.is-selected { border: 2px solid var(--ef-pass-green); padding: 9px 12px; background: #f0f6f2; box-shadow: none; }
.ef-pass-radio { grid-column: 1; grid-row: 1 / 3; width: 18px; height: 18px; border: 1px solid #89a398; border-radius: 50%; background: #fff; }
.ef-pass-option.is-selected .ef-pass-radio { border: 5px solid #fff; background: var(--ef-pass-green); box-shadow: 0 0 0 1px var(--ef-pass-green); }
.ef-has-pass-checkout .ef-pass-term { grid-column: 2; grid-row: 1; font-size: 13px; }
.ef-has-pass-checkout .ef-pass-per { grid-column: 2; grid-row: 2; font-size: 10px; }
.ef-has-pass-checkout .ef-pass-price { grid-column: 3; grid-row: 1 / 3; font-family: inherit; font-size: 16px; font-weight: 800; }
.ef-has-pass-checkout .ef-pass-badge { top: -7px; left: auto; right: 12px; transform: none; }
.ef-has-pass-checkout .ef-pass-note { margin: 9px 0 0; font-size: 11px; }
.ef-has-pass-checkout .ef-unlock-consent { margin: 9px 0 0; color: #5f6e67; font-size: 10.5px; }
.ef-has-pass-checkout .ef-unlock-consent input { width: 18px; height: 18px; accent-color: var(--ef-pass-green); }
.ef-has-pass-checkout .ef-membership-footer { position: sticky; z-index: 6; bottom: 0; padding: 11px 24px calc(12px + env(safe-area-inset-bottom)); border-top-color: #dfe7e1; background: rgba(251,250,246,.97); box-shadow: 0 -8px 22px rgba(23,77,61,.08); backdrop-filter: blur(10px); }
.ef-has-pass-checkout .ef-membership-footer .ef-paypal-cta { min-height: 54px; border-radius: 14px; background: #175c49; box-shadow: 0 8px 18px rgba(23,77,61,.18); }
.ef-has-pass-checkout .ef-membership-checkout-terms { margin-top: 6px; color: #8a948f; font-size: 9px; }
.ef-membership-sheet.ef-has-pass-sdk .ef-membership-footer { position: static; }

@media (max-width: 620px) {
  .ef-membership-backdrop:has(.ef-has-pass-checkout) { align-items: stretch; padding: 0; }
  .ef-membership-sheet.ef-has-pass-checkout { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .ef-has-pass-checkout .ef-membership-pass-hero { padding: 14px 24px 9px; }
  .ef-has-pass-checkout .ef-membership-pass-hero h2 { font-size: 28px; }
}

@media (max-height: 680px) and (max-width: 900px) {
  .ef-has-pass-checkout .ef-membership-pass-hero { padding-top: 9px; }
  .ef-membership-brand { margin-bottom: 7px; }
  .ef-has-pass-checkout .ef-membership-pass-hero h2 { font-size: 24px; }
  .ef-has-pass-checkout .ef-membership-scroll { padding-bottom: 10px; }
}


/* Members: the same warm paper and green as the profile and membership cards. */
.ef-members-transition { width: 100%; max-width: 620px; margin: 12px auto 24px; padding: clamp(28px, 7vw, 52px) 24px; min-height: 370px; border: 1px solid var(--ef-paper-edge); border-radius: 24px; background: radial-gradient(ellipse at 50% 35%, #fffdf7, var(--ef-paper) 75%); box-shadow: 0 12px 36px rgba(31, 85, 70, .06); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 20px; }
.ef-members-transition-brand { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; color: var(--ef-teal-deep); font-family: var(--ef-serif); font-size: 18px; line-height: 1.4; }
.ef-members-transition-brand > span:first-child { font-weight: 600; letter-spacing: .06em; }
.ef-members-transition-brand i { font-style: normal; color: #a77d3b; }
.ef-members-transition-orbit { position: relative; display: grid; place-items: center; width: 88px; height: 88px; margin: 8px 0; flex-shrink: 0; border-radius: 50%; background: var(--ef-teal-soft); color: var(--ef-teal-deep); }
.ef-members-transition-orbit::before { content: ''; position: absolute; inset: -7px; border: 1px solid #cbdad1; border-top: 2px solid var(--ef-teal); border-radius: 50%; animation: ef-members-orbit 2.8s linear infinite; }
.ef-members-transition-orbit > span { display: grid; place-items: center; }
#screen-event-first .ef-members-transition h2 { margin: 0; color: var(--ef-teal-deep); font: 500 clamp(24px, 5vw, 30px)/1.25 var(--ef-serif); text-wrap: balance; }
.ef-members-transition-copy { margin: 12px 0 0; max-width: 360px; color: #52655a; font-size: 15px; line-height: 1.6; }
.ef-members-transition-receipt { margin: 0 0 10px; color: var(--ef-teal-deep); font-size: 14px; font-weight: 600; }
.ef-members-transition-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.ef-members-transition-actions .ef-button { width: auto; min-height: 44px; max-width: 100%; }
.ef-members-transition .ef-text-action { min-height: 44px; padding: 8px 14px; }
.ef-members-transition-orbit.is-still::before { animation: none; border-top-width: 1px; }
@keyframes ef-members-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ef-members-transition-orbit::before { animation: none; } }

/* Eventbrite-style events (owner, 18 Oct 2026): big picture cards in a list,
   and a full event page with the price and one button in a bar at the bottom. */
.ef-event-list { display: grid; gap: 26px; }
.ef-event-big { display: grid; gap: 6px; cursor: pointer; border-radius: 16px; min-width: 0; }
.ef-event-big:focus-visible { outline: 3px solid var(--ef-gold); outline-offset: 4px; }
.ef-event-big.is-highlighted .ef-event-pic { box-shadow: 0 0 0 3px var(--ef-gold); }
.ef-event-pic, .ef-event-page-hero { position: relative; aspect-ratio: 2 / 1; max-width: 100%; overflow: hidden; border-radius: 16px; background: var(--ef-teal-soft); }
.ef-event-pic img, .ef-event-page-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ef-event-pic-banner { width: 100%; height: 100%; display: grid; place-items: center; padding: 16px; text-align: center; background: linear-gradient(135deg, var(--ef-teal), var(--ef-teal-deep)); color: #fff; font-family: var(--ef-serif); font-size: 24px; line-height: 1.2; }
.ef-event-pic-tag { position: absolute; top: 10px; left: 10px; background: #fff; color: var(--ef-ink); font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.ef-event-dateline { margin: 6px 0 0; color: #c2410c; font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: .02em; }
.ef-event-big h3 { margin: 0; font-size: 19px; line-height: 1.25; font-weight: 800; color: var(--ef-ink); text-wrap: balance; }
.ef-event-where { margin: 0; color: var(--ef-muted); font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.ef-event-status { margin: 2px 0 0; justify-self: start; font-size: 12.5px; font-weight: 700; color: var(--ef-teal-deep); background: var(--ef-teal-soft); border-radius: 6px; padding: 3px 8px; }
.ef-event-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.ef-event-price { font-weight: 800; font-size: 14.5px; color: var(--ef-ink); }
#screen-event-first .ef-event-buy .ef-button { width: auto; flex: 0 0 auto; min-height: 42px; padding: 8px 16px; font-size: 14px; }
/* The page */
.ef-event-page-backdrop { align-items: stretch; justify-content: center; padding: 0; }
.ef-modal.ef-event-page { width: min(560px, 100%); max-width: 100%; height: 100%; max-height: 100dvh; margin: 0; border-radius: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.ef-event-page > .ef-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 0 0 16px; }
.ef-event-page .ef-modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; background: #fff; }
.ef-event-page .ef-event-page-hero { border-radius: 0; }
.ef-event-page-body { display: grid; gap: 18px; padding: 16px 18px; }
.ef-event-page-body h2 { margin: 4px 0 2px; font-size: 24px; font-weight: 800; line-height: 1.2; text-wrap: balance; }
.ef-event-page-body h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.ef-event-page-body p { margin: 0 0 6px; line-height: 1.5; }
.ef-event-good { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.ef-event-good div { background: var(--ef-bg); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.ef-event-good dt { font-size: 12px; color: var(--ef-muted); font-weight: 600; }
.ef-event-good dd { margin: 2px 0 0; font-size: 14px; }
.ef-event-org { display: flex; gap: 12px; align-items: center; border: 1px solid var(--ef-line); border-radius: 12px; padding: 12px; }
.ef-event-org > span { width: 44px; height: 44px; flex: none; border-radius: 10px; background: var(--ef-teal-deep); color: #fff; display: grid; place-items: center; font-family: var(--ef-serif); font-weight: 600; }
.ef-event-org div { display: grid; }
.ef-event-org div span { color: var(--ef-muted); font-size: 13px; }
.ef-event-page-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--ef-line); background: var(--ef-card); }
.ef-event-page-bar div { display: grid; min-width: 0; }
.ef-event-page-bar strong { font-size: 15px; }
.ef-event-page-bar span { font-size: 12.5px; color: var(--ef-muted); }
#screen-event-first .ef-event-page-bar .ef-button, .ef-event-page-bar .ef-button { width: auto; flex: 0 0 auto; min-height: 46px; padding: 10px 18px; }
.ef-event-page .ef-modal-close { color: var(--ef-ink); box-shadow: 0 1px 6px rgba(0,0,0,.2); }

/* Left-aligned, ink-coloured text on the cards and the page, whatever the
   modal and heading defaults say; pictures cropped past the illustrations' white margins. */
.ef-event-big, .ef-event-big h3, .ef-event-big p { text-align: left; }
.ef-modal.ef-event-page .ef-event-page-body, .ef-modal.ef-event-page .ef-event-page-body h2, .ef-modal.ef-event-page .ef-event-page-body h3,
.ef-modal.ef-event-page .ef-event-page-body p { text-align: left; color: var(--ef-ink); }
.ef-modal.ef-event-page .ef-event-page-body .ef-event-where, .ef-modal.ef-event-page .ef-event-org div span { color: var(--ef-muted); }
.ef-modal.ef-event-page .ef-event-page-body .ef-event-dateline { color: #c2410c; }
.ef-event-pic img, .ef-event-page-hero img { transform: scale(1.22); }
.ef-event-pic.ef-online-event-art img, .ef-event-page-hero.ef-online-event-art img { transform: none; object-fit: contain; }
.ef-event-pic, .ef-event-page-hero { background: #fff; }
/* One event per slide (owner, 18 Oct 2026): swipe, or tap the dots. */
.ef-event-list.ef-event-slider { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 4px; }
.ef-event-list.ef-event-slider::-webkit-scrollbar { display: none; }
.ef-event-slider > .ef-event-big { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; align-content: start; }
.ef-event-steps { margin-top: 6px; background: var(--ef-card); border: 1px solid var(--ef-line); border-radius: 12px; padding: 12px 14px; }
.ef-event-steps strong { display: block; font-size: 14px; margin-bottom: 6px; color: var(--ef-ink); }
.ef-event-steps ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.ef-event-steps li { font-size: 13.5px; line-height: 1.45; color: var(--ef-ink); text-align: left; }
/* On a wide screen one slide stays a readable card, not a billboard. */
.ef-event-list.ef-event-slider { max-width: 560px; margin-inline: auto; }
/* The open evening's queue (owner, 19 Oct 2026): faces are blurred. Members'
   photos arrive already blurred from the server; the guests' stand-in
   portraits are blurred here. */
.ef-attendee-stack.is-blurred img { filter: blur(3px) saturate(.9); transform: scale(1.15); }
.ef-attendee-stack.is-blurred > span { overflow: hidden; }
.ef-attendee-block { display: grid; gap: 6px; margin-top: 6px; }
.ef-attendee-label { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ef-teal-deep); text-align: left; }
.ef-attendee-block .ef-attendee-stack { margin-top: 0; }