/* Silver Mellow — shared design language.
   Duplicated into each variant's style.css on purpose: layouts.lander links
   exactly one stylesheet per landing, and a second request for ~40 lines of
   custom properties would cost more than the duplication does.

   Deliberately unlike the imported g* designs (bright gradients, heavy sans):
   an editorial serif on a warm off-white ground, with the brand magenta used
   only for the thing we want tapped. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');

:root {
  --ink: #1f2933;
  --ink-soft: #52616b;
  --ground: #f6f3ee;
  --card: #ffffff;
  --line: #e3ded6;
  --accent: #ad1457;
  --accent-ink: #ffffff;
  --accent-wash: #fbeef4;
  --blue: #5f7f96;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(31, 41, 51, .08);
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --wrap: 1080px;
}

* { box-sizing: border-box; }

body.lander {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.sm-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.sm-display {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0;
}

/* The layout rewires every a.btn to open the signup modal, so the CTA is a
   link, never a button element. */
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.02rem;
  /* 44px is the minimum tap target; 54 leaves room for the label to breathe. */
  min-height: 54px;
  padding: 0 30px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(173, 20, 87, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
/* color: inherit is load-bearing. Every CTA wraps its label in a <p> (the
   designer-lander convention), so any section rule like `.b-final p { color: … }`
   also lands on the button's label and beats the colour inherited from a.btn —
   which is how the bottom CTA ended up with grey text on magenta. */
a.btn p { margin: 0; color: inherit; }
a.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(173, 20, 87, .34); }
a.btn:active { transform: translateY(0); }

.sm-note { color: var(--ink-soft); font-size: .87rem; margin: 12px 0 0; }

.sm-eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--blue);
  margin: 0 0 12px;
}

/* ── Variant C: "Question first" ─────────────────────────────────────────
   The third distinct hook. A leads with trust, B with desire, C with
   participation: the first thing on screen is a question to answer, not a
   claim to believe or an inbox to open. The CTA is unchanged underneath —
   every option is an a.btn, so the layout wires it to the same signup modal
   and the funnel is identical. */

.c-shell { min-height: 100vh; display: flex; flex-direction: column; }

.c-bar { padding: 22px 0; text-align: center; }
.c-bar img { height: 38px; width: auto; max-width: calc(100vw - 40px); margin: 0 auto; }

.c-ask { flex: 1; display: flex; align-items: center; padding: 12px 0 52px; }
.c-ask__card {
  background: var(--card);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 38px 30px 34px;
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.c-ask__step { color: var(--blue); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
.c-ask h1 { font-size: clamp(1.55rem, 4.8vw, 2.15rem); margin-bottom: 8px; }
.c-ask__sub { color: var(--ink-soft); margin: 0 0 26px; font-size: 1rem; }

.c-options { display: grid; gap: 12px; }
/* Answers are plain buttons, NOT a.btn: the layout rebinds every a.btn to open
   the signup modal, so an option carrying that class would ask for the email on
   the first tap and there would be no quiz. The real CTA is a hidden a.btn the
   script clicks after the last question. */
.c-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  min-height: 54px;
  padding: 0 22px;
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.c-opt::after { content: '\2192'; opacity: .45; }
.c-opt:hover { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
.c-opt.is-chosen { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.c-opt.is-chosen::after { opacity: .9; }

.c-hidden-cta { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.c-back {
  background: none; border: none; cursor: pointer;
  color: var(--ink-soft); font-family: var(--body); font-size: .9rem;
  margin-top: 14px; min-height: 44px; padding: 0;
}
.c-back:hover { color: var(--accent); }

.c-progress { display: flex; gap: 6px; justify-content: center; margin: 22px 0 0; }
.c-progress i { width: 26px; height: 4px; border-radius: 2px; background: var(--line); transition: background .2s ease; }
.c-progress i.is-done { background: var(--accent); }

.c-reveal { padding: 8px 0 60px; }
.c-reveal__head { text-align: center; margin-bottom: 26px; }
.c-reveal__head h2 { font-size: clamp(1.35rem, 4.2vw, 1.9rem); }
.c-reveal__head p { color: var(--ink-soft); margin: 8px 0 0; font-size: .95rem; }

.c-matches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.c-match { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); position: relative; }
.c-match img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* Blurring the last two is the honest version of "more waiting": it shows the
   shape of what is behind the email ask without pretending to be a real
   profile the visitor could open. */
.c-match--locked img { filter: blur(7px); transform: scale(1.06); }
.c-match--locked::after {
  content: 'Confirm your email to see';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  text-align: center; padding: 0 18px;
  color: #fff; font-size: .86rem; font-weight: 600;
  background: rgba(31, 41, 51, .42);
}
.c-match__body { padding: 12px 14px 16px; }
.c-match__name { font-family: var(--display); font-weight: 600; margin: 0; font-size: 1rem; }
.c-match__line { color: var(--ink-soft); font-size: .88rem; margin: 3px 0 0; }

.c-final { text-align: center; padding: 8px 0 72px; }
.c-final p { color: var(--ink-soft); margin: 0 0 22px; }

@media (max-width: 760px) {
  .c-ask__card { padding: 30px 22px 28px; border-radius: 18px; }
  .c-matches { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* See variant B: white artwork on a light ground needs recolouring. */
.c-bar img { filter: brightness(0) opacity(.82); }

/* The modal's submit is a <button>, so the a.btn rules above never reach it and
   form.css supplies layout without colour. Styled here to match the page CTA —
   an unstyled grey button on the actual submit is the most expensive place to
   leave a default. */
.signup-form__submit {
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  min-height: 54px;
}
.signup-modal__title { font-family: var(--display); font-weight: 600; color: var(--ink); }

/* Full-screen signup modal on phones.
   At 375x667 the shared card is a letterbox floating in a dark overlay with the
   page showing round the edges — cramped, and it competes with the content
   behind it. Edge to edge gives the field and the submit room and removes the
   distraction at the moment of the ask.

   Silver Mellow only, deliberately: the modal is shared chrome, and a change
   here would restyle everdate and fondly too. Specificity has to beat
   form.css's `#signup-modal.container-modal`, which loads after this file —
   hence the body prefix. */
@media (max-width: 640px) {
  .blocker { padding: 0; }

  body.lander #signup-modal.container-modal {
    width: 100%;
    max-width: none;
    margin: 0;
    /* dvh so mobile browser chrome does not crop the submit. */
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none;
    border-radius: 0;
    /* Two traps in one line.
       !important: jquery-modal opens the dialog with .show(), which writes
       `display: inline-block` as an INLINE style — no selector outranks that,
       and without this the box goes full screen while its contents stay pinned
       to the top.
       inline-flex, not flex: .blocker centres its child against a full-height
       inline-block ::before spacer. A block-level flex box cannot share that
       line box, so it lands one whole viewport further down the page. */
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    padding: 30px 24px calc(30px + env(safe-area-inset-bottom));
  }

  body.lander #signup-modal.container-modal a.close-modal {
    top: 14px;
    right: 14px;
  }

  .signup-modal__logo { height: 34px; margin-bottom: 24px; }
  .signup-modal__title { font-size: 1.4rem; }
}