/* 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 A: "Editorial" ──────────────────────────────────────────────
   Trust-led and unhurried. One large photograph, a card that overlaps it, and
   a single CTA. The deviation being tested here is restraint: no urgency, no
   counters, no grid of faces above the fold. */

.a-hero { position: relative; }
.a-hero__media { height: 62vh; min-height: 380px; max-height: 560px; overflow: hidden; }
/* Anchored above centre: the capped band crops the 16:10 hero vertically on
   wide screens, and the centre crop trims the tops of the heads. */
.a-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.a-hero__logo {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  /* Sized by HEIGHT: the icon lockup is roughly 6:1, so a width constraint
     shrinks the wordmark to nothing. max-width keeps a 320px phone safe. */
  height: 38px; width: auto; max-width: calc(100vw - 40px);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.45));
}

.a-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px 28px;
  margin: -70px auto 0;
  position: relative;
  max-width: 660px;
  text-align: center;
}
.a-card h1 { font-size: clamp(1.7rem, 5.2vw, 2.5rem); }
.a-card p.lede { color: var(--ink-soft); font-size: 1.06rem; margin: 14px 0 24px; }

.a-steps { padding: 56px 0 8px; }
.a-steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.a-step { text-align: center; }
.a-step__n {
  width: 44px; height: 44px; margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
}
.a-step h3 { font-family: var(--display); font-weight: 600; font-size: 1.08rem; margin: 0 0 6px; }
.a-step p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

.a-people { padding: 56px 0; }
.a-people__head { text-align: center; margin-bottom: 28px; }
.a-people__head h2 { font-size: clamp(1.4rem, 4.4vw, 2rem); }
.a-people__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Photographs scroll back to the form (see the script in the blade), so they
   must read as tappable. */
.a-hero__media img, .a-person, .a-quote__inner img { cursor: pointer; }

.a-person { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.a-person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.a-person__body { padding: 14px 16px 18px; }
.a-person__name { font-family: var(--display); font-weight: 600; font-size: 1.02rem; margin: 0; }
.a-person__line { color: var(--ink-soft); font-size: .9rem; margin: 4px 0 0; }

.a-quote { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 52px 0; }
.a-quote__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.a-quote img { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; margin: 0 auto 18px; }
.a-quote blockquote { font-family: var(--display); font-weight: 500; font-size: clamp(1.15rem, 3.4vw, 1.5rem); line-height: 1.45; margin: 0; }
.a-quote cite { display: block; font-style: normal; color: var(--ink-soft); font-size: .9rem; margin-top: 14px; }

.a-final { text-align: center; padding: 60px 0 76px; }
.a-final h2 { font-size: clamp(1.5rem, 4.6vw, 2.1rem); margin-bottom: 10px; }
.a-final p { color: var(--ink-soft); margin: 0 0 26px; }

@media (max-width: 760px) {
  .a-hero__media { height: 48vh; min-height: 300px; }
  .a-hero__logo { height: 30px; top: 16px; }
  .a-card { margin: -54px 16px 0; padding: 26px 20px; }
  .a-steps__grid { grid-template-columns: 1fr; gap: 22px; }
  .a-people__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Inline signup — variant A only.
   The form replaces the popup, so it has to carry the visual weight the CTA
   used to: full-width field, the accent submit directly beneath it. */
.a-form { margin: 6px 0 4px; }
.a-form .signup-form { display: grid; gap: 10px; }
.a-form .signup-form__email {
  width: 100%;
  /* 16px minimum, or iOS Safari zooms the page on focus. */
  font-size: 16px;
  min-height: 54px;
  padding: 0 18px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-family: var(--body);
}
.a-form .signup-form__email:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.a-form .signup-form__submit {
  width: 100%;
  border: none;
  cursor: pointer;
  font-family: var(--body);
}
.a-form .signup-form__error { color: #c0392b; font-size: .88rem; margin: 0; }
.a-form .signup-form__fineprint { color: var(--ink-soft); font-size: .82rem; margin: 2px 0 0; }
.a-form .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.a-form .signup-modal__call { margin: 10px 0 0; font-size: .85rem; color: var(--ink-soft); }
.a-form .signup-modal__call-link { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }

.a-jump { color: var(--accent); font-weight: 600; text-decoration: none; display: inline-block; min-height: 44px; line-height: 44px; }

/* 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; }
}