/* The logged-out front door: private 1:1 video introductions (17 Sept 2026).
   Warm paper, one product, one button. Scoped to #screen-landing so none of it
   leaks into the app's screens. No images anywhere on this screen — the demo
   card's photo is a CSS block and the badges are text, which keeps it honest
   on a slow connection, keeps real member photos off a public page, and is
   what the landing tests assert. Light theme only: the rest of the app is. */
#screen-landing {
  --ld-ground: #F7F3EA; --ld-surface: #FFFFFF; --ld-card: #FBF8F1; --ld-line: #E7DFCE;
  --ld-ink: #1F3D33; --ld-muted: #4A5A52; --ld-soft: #6A7770;
  --ld-primary: #2C5545; --ld-primary-ink: #FFFFFF;
  --ld-deep: #1F3D33; --ld-deep-ink: #F7F3EA; --ld-deep-muted: #C9D6CF;
  --ld-gold: #D9A441; --ld-gold-btn: #E3B35A; --ld-navy: #22357A; --ld-tint: #E6EDE7;
  --ld-date: #F0EBDF; --ld-photo: #D9CFBC; --ld-photo-ink: #8C8170;
  --ld-shadow: 0 24px 60px rgba(31,61,51,.13);
  --ld-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; overflow-y: auto; overflow-x: hidden;
  z-index: 9999; background: var(--ld-ground); color: var(--ld-ink);
  font-family: 'Figtree', 'DM Sans', 'Helvetica Neue', Helvetica, sans-serif; font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; scroll-behavior: smooth;
}
#screen-landing * { box-sizing: border-box; }
#screen-landing a { color: inherit; }
#screen-landing :focus-visible { outline: 3px solid var(--ld-gold); outline-offset: 3px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { #screen-landing, #screen-landing * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* The bottom padding is the sticky bar's height on a phone: the footer must clear it. */
#screen-landing .landing-page { max-width: 1248px; margin: 0 auto; padding: 0 20px calc(96px + var(--cookie-banner-offset, 0px)); }
#screen-landing h1, #screen-landing h2, #screen-landing h3, #screen-landing .landing-wordmark, #screen-landing .landing-greet,
#screen-landing .landing-stat b, #screen-landing .landing-num, #screen-landing .landing-meta-name, #screen-landing .landing-date b { font-family: var(--ld-serif); }
#screen-landing h2 { margin: 0 0 22px; font-size: clamp(30px, 4vw, 50px); line-height: 1.06; font-weight: 600; letter-spacing: -.3px; text-align: left; color: var(--ld-ink); }
#screen-landing .landing-sub { margin: -8px 0 24px; color: var(--ld-muted); max-width: 52ch; }
#screen-landing .landing-sr { position: absolute; left: -9999px; }

/* The page's global `button` is width:100% with a green gradient and a
   shadow; every button here resets those explicitly. */
#screen-landing button { width: auto; background: none; box-shadow: none; transition: none; font-family: inherit; }

/* nav */
#screen-landing .landing-top { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; }
#screen-landing .landing-wordmark { font-size: 24px; font-weight: 600; letter-spacing: .5px; white-space: nowrap; }
#screen-landing .landing-wordmark span { color: var(--ld-gold); }
#screen-landing .landing-nav { display: flex; align-items: center; gap: 28px; }
#screen-landing .landing-nav-link { display: none; text-decoration: none; font-weight: 500; }
#screen-landing .landing-pill-outline { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--ld-line); border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--ld-ink); background: var(--ld-surface); cursor: pointer; }

/* hero */
#screen-landing .landing-hero { display: grid; gap: 34px; padding: 22px 0 10px; align-items: center; }
#screen-landing .landing-tag { display: inline-block; padding: 6px 13px; background: var(--ld-tint); color: var(--ld-primary); border-radius: 999px; font-size: 14px; font-weight: 600; }
#screen-landing h1 { margin: 18px 0 16px; font-size: clamp(42px, 6vw, 78px); line-height: 1.01; font-weight: 600; letter-spacing: -.5px; text-align: left; color: var(--ld-ink); }
#screen-landing .landing-lede { margin: 0 0 24px; max-width: 31ch; font-size: clamp(17px, 1.6vw, 21px); color: var(--ld-muted); }
#screen-landing .landing-btn { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 58px; padding: 0 30px; border-radius: 16px; font-weight: 700; font-size: 18px; text-decoration: none; border: 0; cursor: pointer; transition: transform .15s ease, filter .15s ease; }
#screen-landing .landing-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
#screen-landing .landing-btn-primary { background: var(--ld-primary); color: var(--ld-primary-ink); }
#screen-landing .landing-btn-gold { background: var(--ld-gold-btn); color: #1F3D33; }
#screen-landing .landing-cta-row { display: flex; flex-direction: column; gap: 12px; }
#screen-landing .landing-cta-row .landing-btn { width: 100%; }
#screen-landing .landing-assure { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; font-weight: 500; color: var(--ld-muted); justify-content: center; }
#screen-landing .landing-assure span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ld-gold); margin-right: 7px; vertical-align: 2px; }
#screen-landing .landing-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 26px; }
#screen-landing .landing-stat { background: var(--ld-surface); border-radius: 16px; padding: 14px 4px; text-align: center; min-width: 0; }
#screen-landing .landing-stat b { display: block; font-size: clamp(20px, 6.4vw, 26px); font-weight: 600; line-height: 1.2; }
/* A word, not a number: smaller so it never breaks mid-word on a narrow phone. */
#screen-landing .landing-stat-word b { font-size: clamp(17px, 5vw, 22px); padding-top: 3px; }
#screen-landing .landing-stat small { font-size: 13px; color: var(--ld-muted); }
#screen-landing .landing-stats-caption { margin: 8px 0 0; font-size: 12px; color: var(--ld-soft); text-align: center; }

/* the example card */
#screen-landing .landing-card { background: var(--ld-card); border: 1px solid var(--ld-line); border-radius: 28px; padding: 24px 20px 20px; box-shadow: var(--ld-shadow); max-width: 450px; width: 100%; margin: 0 auto; }
#screen-landing .landing-greet { font-style: italic; font-size: 17px; color: var(--ld-primary); }
#screen-landing .landing-card-title { margin: 10px 0 12px; text-align: center; font-size: clamp(28px, 3vw, 34px); line-height: 1.1; font-weight: 600; color: var(--ld-navy); }
#screen-landing .landing-rule { width: 66px; height: 3px; background: var(--ld-gold); border-radius: 2px; margin: 0 auto 16px; }
#screen-landing .landing-photo { position: relative; height: 330px; border-radius: 22px; background: var(--ld-photo); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
#screen-landing .landing-photo-ph { position: absolute; inset: 0 0 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--ld-photo-ink); font-size: 13px; font-weight: 600; }
#screen-landing .landing-count { position: absolute; top: 14px; right: 14px; background: rgba(20,38,32,.8); color: #fff; font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: 999px; }
#screen-landing .landing-meta { position: relative; padding: 16px 18px; background: rgba(20,38,32,.78); color: #fff; }
#screen-landing .landing-meta-name { font-size: 26px; font-weight: 600; }
#screen-landing .landing-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#screen-landing .landing-chip { padding: 5px 11px; background: #F7F3EA; color: #1F3D33; border-radius: 999px; font-size: 13px; font-weight: 600; }
#screen-landing .landing-chip-v { background: transparent; border: 1px solid #fff; color: #fff; }
#screen-landing .landing-card-actions { display: flex; gap: 10px; margin-top: 16px; }
#screen-landing .landing-card-actions button { min-height: 52px; border-radius: 14px; font-size: 16px; font-weight: 700; cursor: pointer; }
#screen-landing .landing-b-pass { flex: 1; background: var(--ld-surface); color: var(--ld-ink); border: 1px solid var(--ld-line); }
#screen-landing .landing-b-req { flex: 2; background: var(--ld-primary); color: var(--ld-primary-ink); border: 0; }
#screen-landing .landing-card-note { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--ld-muted); min-height: 20px; }
#screen-landing .landing-swap { animation: landing-swap .35s ease; }
@keyframes landing-swap { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* sections */
#screen-landing .landing-block { padding: 64px 0 0; }
#screen-landing .landing-steps { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
#screen-landing .landing-step { display: flex; gap: 16px; padding: 22px; background: var(--ld-surface); border-radius: 20px; }
#screen-landing .landing-num { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--ld-deep); color: var(--ld-deep-ink); display: flex; align-items: center; justify-content: center; font-size: 20px; }
#screen-landing .landing-step:last-child .landing-num { background: var(--ld-gold); color: #1F3D33; }
#screen-landing .landing-step h4 { margin: 0 0 4px; font-size: 18px; text-align: left; }
#screen-landing .landing-step p { margin: 0; font-size: 15px; color: var(--ld-muted); }

#screen-landing .landing-compare { display: grid; gap: 24px; align-items: start; }
#screen-landing .landing-compare > div, #screen-landing .landing-hero > div { min-width: 0; }
#screen-landing .landing-table-wrap { overflow-x: auto; border-radius: 22px; background: var(--ld-surface); }
#screen-landing .landing-table { width: 100%; border-collapse: collapse; min-width: 0; font-size: 15px; }
#screen-landing .landing-table th, #screen-landing .landing-table td { text-align: left; padding: 15px 16px; }
#screen-landing .landing-table thead th { background: #1F3D33; color: #F7F3EA; font-size: 14px; }
#screen-landing .landing-table thead th:last-child { color: #E8C274; }
#screen-landing .landing-table tbody tr + tr td, #screen-landing .landing-table tbody tr + tr th { border-top: 1px solid var(--ld-line); }
#screen-landing .landing-table tbody th { font-weight: 600; }
#screen-landing .landing-them { color: var(--ld-soft); }
#screen-landing .landing-us { font-weight: 700; }

/* events: the live rail from /events/public (date, name, format, venue only) and the Eventbrite list */
#screen-landing .landing-rail { display: grid; gap: 12px; }
#screen-landing .landing-event { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--ld-surface); border-radius: 18px; }
#screen-landing .landing-event-head { display: flex; gap: 16px; align-items: center; }
#screen-landing .landing-event-head > div { min-width: 0; flex: 1; }
#screen-landing .landing-date { flex: 0 0 62px; display: flex; flex-direction: column; align-items: center; padding: 8px 0; background: var(--ld-date); border-radius: 12px; }
#screen-landing .landing-date span, #screen-landing .landing-date small { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ld-soft); }
#screen-landing .landing-date strong { font-family: var(--ld-serif); font-size: 26px; font-weight: 600; line-height: 1.1; }
#screen-landing .landing-badge { display: inline-block; margin-bottom: 4px; padding: 3px 9px; border-radius: 7px; background: var(--ld-tint); color: var(--ld-primary); font-size: 12px; font-weight: 700; }
#screen-landing .landing-event h3 { margin: 0; font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--ld-ink); text-align: left; overflow-wrap: anywhere; }
#screen-landing .landing-event-when, #screen-landing .landing-event-venue { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--ld-muted); font-size: 14px; }
#screen-landing .landing-event-when svg { flex: 0 0 auto; }
#screen-landing .landing-pill-amber { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--ld-gold-btn); color: #1F3D33; font-weight: 700; font-size: 15px; cursor: pointer; }
#screen-landing .landing-card-signup { width: 100%; }
#screen-landing .landing-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
#screen-landing .landing-section-head h2 { margin: 0; }
#screen-landing .landing-section-head span { font-size: 14px; color: var(--ld-muted); }
#screen-landing .landing-list { display: grid; gap: 10px; }
#screen-landing .landing-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--ld-surface); }
#screen-landing .landing-row .landing-date { flex-basis: 52px; padding: 6px 0 5px; }
#screen-landing .landing-row .landing-date strong { font-size: 20px; }
#screen-landing .landing-row-copy { flex: 1; min-width: 0; }
#screen-landing .landing-row-copy strong { display: block; font-size: 15px; font-weight: 700; }
#screen-landing .landing-row-copy span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ld-muted); }
#screen-landing .landing-row-sold { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--ld-primary); }
#screen-landing .landing-caption { margin: 10px 0 0; font-size: 12px; color: var(--ld-soft); }

#screen-landing .landing-faq { display: grid; gap: 10px; max-width: 820px; }
#screen-landing details { background: var(--ld-surface); border-radius: 16px; padding: 0 18px; }
#screen-landing summary { list-style: none; cursor: pointer; padding: 18px 0; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 12px; overflow-wrap: anywhere; }
#screen-landing summary::-webkit-details-marker { display: none; }
#screen-landing summary::after { content: "+"; font-size: 24px; font-weight: 400; color: var(--ld-primary); transition: transform .2s; }
#screen-landing details[open] summary::after { transform: rotate(45deg); }
#screen-landing details p { margin: 0 0 18px; color: var(--ld-muted); font-size: 15px; }

#screen-landing .landing-final { margin-top: 72px; padding: 40px 24px; background: var(--ld-deep); color: var(--ld-deep-ink); border-radius: 30px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
#screen-landing .landing-final h2 { margin: 0; color: var(--ld-deep-ink); text-align: center; }
#screen-landing .landing-final p { margin: 0; color: var(--ld-deep-muted); }
#screen-landing .landing-final .landing-btn { width: 100%; max-width: 380px; margin-top: 6px; }
#screen-landing .landing-final small { color: var(--ld-deep-muted); font-size: 14px; }
#screen-landing .landing-final-left, #screen-landing .landing-final-right { display: flex; flex-direction: column; align-items: center; gap: 10px; }

#screen-landing .landing-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 32px 0 8px; font-size: 13px; color: var(--ld-muted); }
#screen-landing .landing-links { display: flex; flex-wrap: wrap; gap: 8px; }
#screen-landing .landing-links a { color: var(--ld-ink); }
#screen-landing .landing-footer p { margin: 0; line-height: 1.5; }

/* sticky phone CTA: shown by JS once the hero button scrolls out; sits above the cookie banner */
#screen-landing .landing-sticky { position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--cookie-banner-offset, 0px) + env(safe-area-inset-bottom)); z-index: 2; transform: translateY(140%); transition: transform .25s ease; }
#screen-landing .landing-sticky.is-visible { transform: none; }
#screen-landing .landing-sticky .landing-btn { width: 100%; max-width: 476px; margin: 0 auto; display: flex; box-shadow: 0 10px 30px rgba(0,0,0,.25); }

@media (min-width: 880px) {
  #screen-landing .landing-page { padding: 0 56px 40px; }
  #screen-landing .landing-top { padding: 28px 0; }
  #screen-landing .landing-nav-link { display: inline; }
  #screen-landing .landing-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; padding: 48px 0 20px; }
  #screen-landing .landing-cta-row { flex-direction: row; align-items: center; gap: 18px; }
  #screen-landing .landing-cta-row .landing-btn { width: auto; }
  #screen-landing .landing-assure { justify-content: flex-start; }
  #screen-landing .landing-stats { display: flex; gap: 36px; background: none; border-top: 1px solid var(--ld-line); padding-top: 20px; }
  #screen-landing .landing-stat { background: none; padding: 0; text-align: left; }
  #screen-landing .landing-stat b { font-size: 30px; }
  #screen-landing .landing-stats-caption { text-align: left; }
  #screen-landing .landing-photo { height: 370px; }
  #screen-landing .landing-block { padding-top: 104px; }
  #screen-landing .landing-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  #screen-landing .landing-step { flex-direction: column; padding: 32px; }
  #screen-landing .landing-step h4 { font-size: 21px; }
  #screen-landing .landing-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
  #screen-landing .landing-table { font-size: 16px; }
  #screen-landing .landing-table th, #screen-landing .landing-table td { padding: 18px 24px; }
  #screen-landing .landing-rail, #screen-landing .landing-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  #screen-landing .landing-final { flex-direction: row; justify-content: space-between; text-align: left; padding: 64px; margin-top: 104px; }
  #screen-landing .landing-final h2 { text-align: left; }
  #screen-landing .landing-final-left { align-items: flex-start; gap: 12px; }
  #screen-landing .landing-final .landing-btn { width: auto; padding: 0 36px; }
  #screen-landing .landing-sticky { display: none; }
}