/* ===========================================================================
   /lista-espera  +  /en/waitlist — dedicated conversion page.

   Design posture: a calm, single-column waitlist page. No distractions,
   no upsells, no hero mockup. Just a warm surface, an oversized eyebrow
   numeral, a proper label-above-input form, and the legal disclosure
   sitting quietly under the submit button where TCPA reviewers expect
   to find it. Heritage palette only (verde / hueso / tinta / rojo);
   the Cash-green app colour is deliberately NOT used here so the page
   reads as "from Pesito" rather than "from the app".
   =========================================================================== */

/* ---------- Page shell ---------- */

.wl-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 700px at 100% -8%, rgba(0, 166, 81, 0.10) 0%, transparent 60%),
    radial-gradient( 900px 500px at -10% 110%, rgba(111, 207, 151, 0.08) 0%, transparent 65%),
    var(--hueso);
}

.wl-main {
  flex: 1;
  padding: clamp(88px, 8vw, 112px) 0 clamp(56px, 6.5vw, 96px);
}

/* ---------- Split layout ---------- */

.wl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(48px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 1023px) {
  .wl-grid { grid-template-columns: 1fr; }
}

/* ---------- Left rail ---------- */

.wl-copy { max-width: 520px; }

/* The back crumb uses main.css .faq-hub-crumb (44px target); the old .how-crumb rules are retired. */
.wl-copy h1 {
  color: var(--tinta-900);
  margin-top: 12px;
  max-width: 14ch;
}
.wl-copy h1 .brand-dot { color: var(--verde-500); }
.wl-lede {
  margin-top: 24px;
  max-width: 460px;
  color: var(--tinta-500);
}

/* Reassurance list — three beats, understated pre-form so it reads as a
   promise rather than a sales pitch. */
.wl-reassure {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wl-reassure li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: var(--fs-body);
  color: var(--tinta-700);
  line-height: 1.5;
}
.wl-reassure svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--verde-500);
}
.wl-reassure strong {
  font-weight: 700;
  color: var(--tinta-900);
  display: block;
}
.wl-reassure span {
  color: var(--tinta-500);
  font-size: var(--fs-caption);
  display: block;
  margin-top: 2px;
}

/* ---------- The form card ---------- */

.wl-card {
  background: var(--blanco);
  border: 1px solid rgba(11, 11, 11, 0.06);
  border-radius: var(--radius-xl);
  padding: clamp(20px, 2.6vw, 36px);
  box-shadow:
    0 1px 0 light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.06)) inset,
    0 20px 60px -30px rgba(0, 61, 38, 0.30),
    0 2px 8px rgba(11, 11, 11, 0.04);
  max-width: 480px;
  margin-left: auto;
  width: 100%;
}
@media (max-width: 1023px) {
  .wl-card { margin-left: 0; }
}
@media (max-width: 560px) {
  .wl-card { border-radius: var(--radius-lg); }
}

.wl-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wl-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 420px) {
  .wl-row { grid-template-columns: 1fr; }
}

.wl-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--tinta-700);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.wl-field label .req {
  color: var(--verde-700);
  margin-left: 2px;
  font-weight: 700;
}
.wl-field label .opt {
  color: var(--tinta-500);
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0;
  margin-left: 6px;
}
.wl-input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--tinta-300);
  background: var(--hueso);
  color: var(--tinta-900);
  font-size: var(--fs-body);
  font-weight: 500;
  font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.wl-input::placeholder { color: var(--tinta-500); opacity: 0.8; }
.wl-input:hover { border-color: var(--tinta-500); }
.wl-input:focus {
  outline: none;
  border-color: var(--verde-500);
  background: var(--blanco);
  box-shadow: 0 0 0 3px var(--verde-100);
}

/* Consent row.
 *
 * Two variants share this skeleton:
 *   1. `.wl-consent--always` — the marketing-email consent that gates
 *      the submit button. Always visible. Slightly firmer border + a
 *      hairline top rule so it reads as the "Before you continue…"
 *      contract rather than an add-on.
 *   2. Default (toggled via [hidden]) — the SMS consent that only
 *      appears once the phone field has content.
 *
 * The checkbox itself is restyled (rather than hidden) so a TCPA /
 * CAN-SPAM reviewer can see at a glance that the control is real and
 * keyboard-reachable.
 */
.wl-consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 14px 14px 12px;
  background: var(--verde-050);
  border: 1px solid var(--verde-100);
  border-radius: var(--radius-md);
}
.wl-consent[hidden] { display: none; }
.wl-consent--always {
  /* Mark it visually as "this is required". Same palette, heavier
     border so it stands apart from the SMS consent that appears below. */
  border-color: var(--verde-500);
  background: linear-gradient(180deg, var(--verde-050) 0%, var(--blanco) 100%);
}
.wl-consent input[type="checkbox"] {
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1.5px solid var(--verde-500);
  border-radius: 6px;
  background: var(--blanco);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background var(--dur-fast) var(--ease-standard);
}
.wl-consent input[type="checkbox"]::before {
  content: '';
  width: 11px;
  height: 11px;
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease-emphasized);
  background: var(--verde-700);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.wl-consent input[type="checkbox"]:checked::before { transform: scale(1); }
.wl-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--verde-500);
  outline-offset: 2px;
}
.wl-consent label {
  font-size: 13px;
  color: var(--tinta-700);
  line-height: 1.5;
  cursor: pointer;
  flex: 1;
}
.wl-consent label strong {
  display: block;
  font-weight: 700;
  color: var(--tinta-900);
  margin-bottom: 2px;
  font-size: 13px;
}

/* Submit button — full-width on the card, heritage verde-500 primary.
 *
 * The disabled state (before the user ticks the marketing-consent box)
 * uses a desaturated verde + not-allowed cursor so it's unmistakably
 * "do this first" rather than looking like the normal enabled button.
 */
.wl-form .btn.waitlist-submit {
  margin-top: 8px;
  height: 54px;
  width: 100%;
  justify-content: center;
}
.wl-form .btn.waitlist-submit:disabled,
.wl-form .btn.waitlist-submit[aria-disabled="true"] {
  background: var(--tinta-300);
  color: var(--tinta-500);
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: auto; /* so title / aria still respond to hover */
}
.wl-form .btn.waitlist-submit:disabled:hover,
.wl-form .btn.waitlist-submit[aria-disabled="true"]:hover {
  background: var(--tinta-300);
  color: var(--tinta-500);
  box-shadow: none;
  transform: none;
}

/* Inline error bar sitting between the form and the disclaimer. */
.wl-form-error {
  color: #A50F20;
  background: var(--rojo-050);
  border: 1px solid var(--rojo-200);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  margin: 4px 0 0;
}

/* Disclosure block — the legal text. Kept quiet but not hidden. */
.wl-legal {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(11, 11, 11, 0.06);
  font-size: 12px;
  line-height: 1.55;
  color: var(--tinta-500);
}
.wl-legal a {
  color: var(--verde-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wl-legal a:hover { color: var(--verde-900); }

/* ---------- Success state ---------- */

.wl-success {
  display: none;
  text-align: center;
  padding: 12px 4px;
}
.wl-form.is-success { display: none; }
.wl-form.is-success ~ .wl-success { display: block; }

.wl-success-badge {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--verde-100);
  display: grid;
  place-content: center;
  color: var(--verde-700);
}
.wl-success h2 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--tinta-900);
  margin-bottom: 12px;
}
.wl-success p {
  color: var(--tinta-500);
  font-size: var(--fs-body);
  line-height: 1.55;
  max-width: 36ch;
  margin: 0 auto;
}
.wl-success .wl-success-sub {
  margin-top: 20px;
  font-size: 12px;
  color: var(--tinta-500);
}

/* Submitting state — muted button, animated dot progress inline. */
.wl-form.is-submitting .waitlist-submit { opacity: 0.6; cursor: wait; }

/* ---------- Native form (2026-10): referral, honeypot, success, stats ---------- */
.wl-hint {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tinta-500);
}
.wl-hint.is-on { color: var(--verde-700); font-weight: 600; }
/* The honeypot: present for bots, absent for people and for assistive tech. */
.wl-trap {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.wl-form { position: relative; }
.wl-form[hidden] { display: none; }
.wl-success[hidden] { display: none; }
.wl-success:not([hidden]) { display: block; text-align: left; padding: 4px 0 0; }
.wl-success h2 { margin-bottom: 8px; }
.wl-success .wl-success-badge { margin: 0 0 16px; }
.wl-success p { max-width: none; margin: 0 0 8px; color: var(--tinta-700); }
.wl-position { font-size: var(--fs-body-l); color: var(--tinta-900) !important; }
.wl-position strong { font-family: var(--font-black); font-weight: 400; font-size: 1.4em; letter-spacing: -0.01em; }
.wl-founder { font-weight: 600; }
.wl-share-label {
  display: block;
  margin: 16px 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tinta-700);
  letter-spacing: 0.02em;
}
.wl-share { display: flex; gap: 8px; }
.wl-share .wl-input { flex: 1; min-width: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: 14px; }
.wl-share .btn { height: 52px; white-space: nowrap; }
@media (max-width: 420px) {
  .wl-share { flex-direction: column; }
  .wl-share .btn { width: 100%; justify-content: center; }
}
.wl-share-note { font-size: 13px; }
.wl-next { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
/* Counter and leaderboard: reserved, hidden until the stats answer. */
.wl-stats[hidden], .wl-counter[hidden], .wl-board[hidden] { display: none; }
.wl-stats { margin-top: 24px; }
.wl-counter-number { margin: 8px 0 0; }
.wl-counter-number strong {
  font-family: var(--font-black);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.wl-counter-label { margin: 6px 0 0; font-weight: 600; color: var(--tinta-700); }
.wl-board-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  counter-reset: supporter;
}
.wl-board-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(11, 11, 11, 0.08);
  font-variant-numeric: tabular-nums;
}
.wl-board-list li::before {
  counter-increment: supporter;
  content: counter(supporter);
  width: 1.6em;
  font-family: var(--font-black);
  color: var(--tinta-500);
}
.wl-board-name { flex: 1; font-weight: 700; }
.wl-board-count { font-size: 13px; color: var(--tinta-700); }
.wl-board-note { margin: 12px 0 0; font-size: 12px; color: var(--tinta-500); line-height: 1.5; }

/* ---------- The survey page ---------- */
.sv-q { margin: 0; padding: 0; border: 0; min-width: 0; }
.sv-q legend {
  display: block;
  padding: 0;
  margin-bottom: 8px;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--tinta-900);
  line-height: 1.4;
}
.sv-q .req { color: var(--verde-700); margin-left: 2px; font-weight: 700; }
.sv-q .opt { color: var(--tinta-500); font-weight: 500; text-transform: lowercase; margin-left: 6px; font-size: 12px; }
.sv-q.wl-field label { font-size: var(--fs-body); font-weight: 700; color: var(--tinta-900); text-transform: none; letter-spacing: 0; }
.sv-opts { display: grid; gap: 8px; }
@media (min-width: 560px) { .sv-opts { grid-template-columns: 1fr 1fr; } }
.sv-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--tinta-300);
  border-radius: var(--radius-md);
  background: var(--hueso);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
  color: var(--tinta-900);
}
.sv-opt:hover { border-color: var(--tinta-500); }
.sv-opt:has(input:checked) { border-color: var(--verde-500); background: var(--verde-050); }
.sv-opt input { margin: 2px 0 0; accent-color: var(--verde-700); flex-shrink: 0; width: 18px; height: 18px; }
.sv-opt:has(input:focus-visible) { outline: 2px solid var(--verde-500); outline-offset: 2px; }
textarea.sv-text { height: auto; min-height: 88px; padding: 12px 16px; resize: vertical; line-height: 1.5; }
.sv-page .wl-form { gap: 22px; }
.wl-white-glove { font-weight: 600; color: var(--verde-900); }
/* The survey call to action, under the rule between the signup and the fine print. */
.wl-shape { text-align: center; margin: 0 0 40px; }
.wl-shape .btn { min-height: 56px; padding-inline: 32px; font-size: 18px; }
.wl-shape-sub { margin: 12px 0 0; font-size: var(--fs-body); color: var(--tinta-700); line-height: 1.5; }

/* ---------- 2026-10-09: what Pesito is, a shorter form ----------
   A visitor who arrives on a friend's link has usually never heard of
   Pesito, so the masthead says what it is before it asks for anything,
   and the form is down to name, email, phone and one consent box. */

/* The invited note, shown by waitlist.js when the URL (or the session)
   carries a referral code. On the fixed amber masthead, so ink-fixed. */
.wl-invited[hidden] { display: none; }
.wl-invited {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 14px;
  padding: 10px 14px;
  border: 1.5px solid var(--ink-fixed);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--ink-fixed);
}
.wl-invited .icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }

/* What Pesito does: four short beats under the lede. Two columns from
   phone width up, so the form still starts near the first screen. */
.wl-what {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  width: 100%;
  max-width: 66ch;
}
.wl-what li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-fixed);
}
.wl-what .icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.wl-what strong { display: block; font-size: var(--fs-body); font-weight: 800; line-height: 1.25; margin-bottom: 2px; }
.wl-what-note {
  margin: 16px 0 0;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--ink-fixed);
}
.wl-what-note a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
/* Phones: one column, the title run in with its line, so the four
   beats cost about two lines each and the form starts sooner. */
@media (max-width: 559px) {
  .wl-what { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; }
  .wl-what li { font-size: 15px; }
  .wl-what strong { display: inline; font-size: inherit; margin: 0; }
}

/* What Pesito does: its own panel, in the masthead's fixed amber, so on
   a wide screen the two read as one masthead. It comes after the form
   in the page, so on a phone the form starts in the first screen. */
.editorial-system.wl-page .ed-wrap > .wl-what-panel {
  background: var(--amarillo-500);
  color: var(--ink-fixed);
  color-scheme: light;
  --tinta-500: var(--tinta-700);
}
.wl-what-panel > .wl-what { margin-top: 0; }

/* Wide screens: masthead and the four beats side by side, the form
   under both. The DOM keeps the phone's order (masthead, form, beats). */
@media (min-width: 1024px) {
  .editorial-system.wl-page .ed-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .editorial-system.wl-page .ed-wrap > * { grid-column: 1 / -1; }
  .editorial-system.wl-page .ed-wrap > .wl-hero { grid-column: 1; grid-row: 1; }
  .editorial-system.wl-page .ed-wrap > .wl-what-panel {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .wl-what-panel > .wl-what { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* The signup card on a phone: the plate glyph and the long intro cost
   a screen of scrolling before the first field, so the plate goes. */
@media (max-width: 767px) {
  .editorial-system .carta:has(> .wl-gform) > .carta-aside { display: none; }
  /* The "Home" crumb and the eyebrow repeat the nav and the lede; on a
     phone they cost the line that brings the first field into view. */
  .wl-hero .faq-hub-crumb, .wl-hero .eyebrow { display: none; }
  .editorial-system .wl-hero .wl-copy h1 { margin-top: 0; }
}
/* What joining gets you, under the button that does it. */
.wl-form .wl-gform-sub { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tinta-700); text-align: center; }

/* Names stay side by side down to the narrowest phones. */
@media (max-width: 420px) {
  .wl-row { grid-template-columns: 1fr 1fr; gap: 10px; }
}
@media (max-width: 339px) {
  .wl-row { grid-template-columns: 1fr; }
}

/* The phone: a country picker in front of the number. The native
   select sits invisibly over the flag, so the phone's own picker (the
   wheel on iOS, the list on Android) opens and a screen reader reads a
   real select. */
.wl-tel { display: flex; gap: 8px; }
.wl-tel .wl-input { flex: 1; min-width: 0; }
.wl-cc {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 72px;
  height: 52px;
  border: 1px solid var(--tinta-300);
  border-radius: var(--radius-md);
  background: var(--hueso);
  color: var(--tinta-700);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.wl-cc:hover { border-color: var(--tinta-500); }
.wl-cc:focus-within {
  border-color: var(--verde-500);
  background: var(--blanco);
  box-shadow: 0 0 0 3px var(--verde-100);
}
.wl-cc-flag { font-size: 22px; line-height: 1; }
.wl-cc select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;   /* 16px or iOS zooms the page on focus */
  -webkit-appearance: none;
  appearance: none;
}

/* The three consents, one per database column, read as one block:
   one frame, hairlines between, so they cost the space of a single
   card instead of three. Each box is still its own control. */
.wl-consents {
  border: 1px solid var(--verde-500);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--verde-050) 0%, var(--blanco) 100%);
  overflow: hidden;
}
.wl-consents .wl-consent { border: 0; border-radius: 0; background: none; padding: 12px 14px 12px 12px; }
.wl-consent-list > .wl-consent + .wl-consent { border-top: 1px solid var(--verde-100); }
.wl-consents .wl-consent label { font-size: 12px; line-height: 1.45; color: var(--tinta-700); }
/* The bold line is what a person reads; the disclosure under it is the
   fine print, a size down but in full, and never hidden. */
.wl-consents .wl-consent label strong { font-size: 14.5px; line-height: 1.3; margin-bottom: 4px; color: var(--tinta-900); }
/* Select all: a lead row, set apart by a firmer rule. */
.wl-consents > .wl-consent--all { align-items: center; background: var(--verde-050); }
.wl-consent-list { border-top: 1px solid var(--verde-500); }
.wl-consent-list[hidden] { display: none; }
/* "Show details" / "Hide details": text-styled, a full 44px target. */
.wl-consents-toggle[hidden] { display: none; }
.wl-consents-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -12px 0;
  padding: 0 2px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--verde-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.wl-consents-toggle:focus-visible { outline: 2px solid var(--verde-500); outline-offset: 2px; border-radius: 4px; }
.wl-consent--all label strong { margin-bottom: 0; }
.wl-consent input[type="checkbox"]:indeterminate::before { transform: scale(1); clip-path: inset(40% 10% 40% 10%); }

/* A long label (Nahuatl at 320px runs to two lines) grows the button
   instead of spilling out of a fixed 54px. */
.wl-form .btn.waitlist-submit { height: auto; min-height: 54px; white-space: normal; text-align: center; }

/* The terms and privacy links inside the consent label read as links,
   not as more label: they inherited the label's ink with no underline. */
.wl-consent label a { color: var(--verde-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* This device's own link, on a return visit (docs/referral-memory F3).
   Same frame as the consent block, so it reads as part of the card. */
.wl-mine[hidden] { display: none; }
.wl-mine {
  padding: 14px;
  border: 1px solid var(--verde-500);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--verde-050) 0%, var(--blanco) 100%);
}
.wl-mine-title { margin: 0 0 10px; font-size: var(--fs-body); line-height: 1.45; color: var(--tinta-900); }
.wl-mine-title strong { display: block; }
.wl-mine-note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--tinta-700); }
/* "Not you? Forget this link": text-styled, but a 44px target. */
.wl-forget {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--verde-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.wl-success [data-wl-share][hidden], .wl-mine [data-wl-share][hidden] { display: none; }

/* Short phones (iPhone SE, small Android): the same order, a little less
   air, so the first field still lands in the first screen at 320x568. */
@media (max-width: 767px) and (max-height: 700px) {
  .editorial-system.wl-page:not(.editorial-home) .ed-wrap > .ed-panel.wl-hero:first-child { padding-block: 18px; }
  .wl-hero .wl-lede { margin-top: 12px; font-size: 15px; line-height: 1.45; }
  .wl-hero .wl-invited { margin-bottom: 10px; padding: 8px 12px; font-size: 14px; }
  .editorial-system .carta:has(> .wl-gform) { padding-block: 18px; gap: 12px; }
  .editorial-system .wl-gform h2 { font-size: 22px; }
}
/* The smallest phones (320x568): a smaller headline and lede as well. The
   selector restates the masthead's own phone h1 rule to outrank it. */
@media (max-width: 767px) and (max-height: 600px) {
  .editorial-system.wl-page:not(.editorial-home):not(.editorial-faq-page) .ed-wrap > .ed-panel.wl-hero:first-child h1 { font-size: 25px; }
  .wl-hero .wl-lede { font-size: 14px; }
}