/* Overrides shared by all designer landers. Loaded AFTER each design's
   style.css, and it lives here (not in the imported css/) so
   scripts/import-landers.sh cannot overwrite it. */

/* Cross-brand safety: the designs hardcode a hero logo size that suited the
   brand they were authored for, but we serve one stylesheet across every
   brand's own logo.svg. A wider logo would push the page horizontally.
   Venezueladates/G2v1 is the only brand dir upstream carrying this fix, which
   suggests they hit exactly this. Applied to all landers, not just g2v1. */
.hero__logo,
.hero__logo > img {
  max-width: calc(100vw - 32px);
}

/* ---------------------------------------------------------------------------
   Signup / collect modal.

   The card itself comes from the designers' .container-modal rule (white,
   max-width 500px, width 90%, radius, shadow, styled close icon) — the layout
   passes modalClass:'container-modal' so we inherit all of it.

   We repaint it DARK on purpose: every brand's logo.svg is white (authored for
   a dark hero), and g8v1 ships a .btn--white CTA. On the library's white card
   both would disappear. Dark works for every design and every brand with no
   per-brand overrides.
   --------------------------------------------------------------------------- */
#signup-modal.container-modal {
  background: #16141c;
  color: #fff;
  padding: 28px 22px 24px;
  text-align: center;
  /* Never taller than the viewport on a short/landscape phone. */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.signup-modal__logo {
  display: block;
  height: 30px;
  width: auto;
  max-width: 70%;
  margin: 0 auto 18px;
}

.signup-modal__title {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 8px;
  color: #fff;
}

.signup-modal__sub {
  font-size: 0.9rem;
  line-height: 1.45;
  color: #c9c4d4;
  margin: 0 0 18px;
}

.signup-form__email {
  display: block;
  width: 100%;
  box-sizing: border-box;
  /* 16px minimum: anything smaller makes iOS Safari zoom the page on focus. */
  font-size: 16px;
  /* 48px+ tap target (WCAG 2.5.5 / platform guidance). */
  min-height: 52px;
  padding: 14px 16px;
  border: 2px solid #3a3546;
  border-radius: 10px;
  background: #fff;
  color: #16141c;
  margin-bottom: 12px;
  outline: none;
}

.signup-form__email:focus {
  border-color: #8b7fb0;
}

.signup-form__error {
  color: #ff9db4;
  font-size: 0.88rem;
  text-align: left;
  margin: 0 0 12px;
}

/* Reuses each design's own .btn look; only layout/tap-size is forced here. */
/* ---------------------------------------------------------------------------
   Submit button — NO colour defaults here, deliberately.

   The block below sets layout only; colours come from each design, usually via
   its own `.btn` rule (the submit carries both classes). A design that supplies
   neither renders the browser's grey default — which happened to the first
   in-house brand, on the actual submit inside the modal.

   The obvious fix, a zero-specificity default, was tried and reverted: the
   imported g* designs colour the background through `.btn` but never set
   `color`, so a default `color: #fff` reached every one of them and turned
   black text white on coral — about 2.5:1 contrast against black's 8.4:1. A
   default that silently restyles live brands is worse than no default.

   So this stays a review item instead: see the checklist in
   .claude/skills/launch-brands/DESIGN.md.
   --------------------------------------------------------------------------- */
.signup-form__submit {
  display: block;
  width: 100%;
  min-height: 52px;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.signup-form__fineprint {
  font-size: 0.72rem;
  line-height: 1.4;
  color: #948da8;
  margin: 14px 0 0;
}

.hp-field {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

/* The close icon sits outside the card corner by default, which clips on
   narrow screens — pull it inside. */
#signup-modal.container-modal a.close-modal {
  top: 8px;
  right: 8px;
  filter: invert(1);
}

/* ---------------------------------------------------------------------------
   "Free call with Cindy" — the alternative inside the signup modal
   (signup-modal partial). Fineprint-sized text with an inline link-styled
   button: it must stay visually subordinate to the email submit. Hidden
   until call-cta.js confirms a mobile platform (iOS → .ics, Android →
   Google Calendar); desktop and no-JS never see it. The negative margin +
   min-height trick mirrors .legal__links — a 44px tap target without
   growing the line.
   --------------------------------------------------------------------------- */
.signup-modal__call {
  display: none;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #948da8;
  margin: 16px 0 0;
}

.signup-modal__call--visible {
  display: block;
}

.signup-modal__call-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -14px 0;
  padding: 0 4px;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: #c9c4d4;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.signup-modal__call-link:hover {
  color: #fff;
}

/* Legal links render ~18px tall from the designers' 12px type, well under the
   44px minimum tap target. Grow the hit area with padding and keep the visual
   size the designers chose (negative margin absorbs the extra height so the
   footer does not grow). */
/* ---------------------------------------------------------------------------
   Legal footer — DEFAULTS ONLY.

   Footer styling lives in each design's own style.css, which means a new design
   that forgets it renders the footer with browser defaults: no padding, left
   aligned, blue underlined links. That is exactly what happened to the first
   in-house design, and nothing about it looks like a missing stylesheet.

   Wrapped in :where() so specificity is zero — every one of the imported g*
   designs styles .legal itself and continues to win, while a design that says
   nothing gets something presentable. Colours are inherited rather than fixed,
   since this layer cannot know whether the design's ground is light or dark.
   --------------------------------------------------------------------------- */
:where(footer.legal) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 30px 16px 38px;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.5;
  opacity: 0.72;
}

:where(.legal__age) { margin: 0; }

:where(.legal__links) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 20px;
}

:where(.legal__links a) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  margin: -13px 0;
}