/* My Humdum · pre-launch home page
   Everything written FOR this page. home.css is generated from the app's own
   stylesheet and must not be edited; this file loads after it and holds only
   what the app's landing page does not have: the email box in the hero, and the
   few adjustments that follow from removing the pricing, legal and app-store
   pieces until launch day.

   House rules, same as the app: no em dashes, gold never sets type on a light
   surface, and colours come from the tokens home.css already declares. */

/* ---------- the email box ---------- */

/* Visually hidden, still read aloud. */
.pl-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* The hero's own bottom margin on the sub line (44px) is the gap above this. */
.lp .pl-form { max-width: 480px; }

/* One pill holding the field and the button, so the pair reads as a single control. */
.lp .pl-field {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 7px 7px 8px;
  background: var(--mh-surface, #fff);
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  box-shadow: 0 10px 30px -18px rgba(26, 26, 26, 0.4);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Focus lives on the pill, not the bare input, so the whole control lights up. */
.lp .pl-field:focus-within {
  border-color: rgba(139, 38, 53, 0.4);
  box-shadow: 0 0 0 4px rgba(139, 38, 53, 0.08), 0 10px 30px -18px rgba(26, 26, 26, 0.4);
}
.lp .pl-field.is-bad { border-color: var(--mh-danger, #B42318); }
/* app.js hides the pill once the address is in. `display: flex` above would
   otherwise outrank the hidden attribute and leave it on screen. */
.lp .pl-field[hidden] { display: none; }

/* home.css carries the app's generic text-input look (a bordered white box with
   its own focus ring). Inside the pill the input must be bare, so these restate
   every property that rule sets, at a specificity that beats it in both states. */
.lp .pl-field .pl-input,
.lp .pl-field .pl-input:focus {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;                            /* or a long address blows the pill open */
  padding: 12px 10px 12px 14px;
  border: 0; border-radius: 0; outline: none; box-shadow: none;
  background: transparent;
  font-family: inherit; font-size: 15px; font-weight: 500;
  color: var(--lp-ink);
}
.lp .pl-field .pl-input::placeholder { color: #A8A29E; font-weight: 400; }

.lp .pl-go {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 26px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--lp-accent); color: #fff;
  font-family: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.3s ease, transform 0.2s ease;
}
.lp .pl-go:hover { background: var(--lp-ink); }
.lp .pl-go:active { transform: scale(0.98); }
.lp .pl-go:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 3px; }
.lp .pl-go[disabled] { opacity: 0.6; cursor: default; }
.lp .pl-go-ico { width: 15px; height: 15px; flex: 0 0 auto; }

.lp .pl-note {
  margin: 14px 0 0 16px;
  font-size: 13px; font-weight: 500;
  color: var(--lp-muted);
  min-height: 1.4em;                       /* reserve the line so a reply never shifts the page */
}
.lp .pl-note.is-ok { color: var(--mh-success, #4F7A46); font-weight: 600; }
.lp .pl-note.is-bad { color: var(--mh-danger, #B42318); font-weight: 600; }

/* The header button jumps here. A brief ring shows the visitor where they landed. */
.lp .pl-field.is-called {
  border-color: rgba(139, 38, 53, 0.4);
  box-shadow: 0 0 0 4px rgba(139, 38, 53, 0.08), 0 10px 30px -18px rgba(26, 26, 26, 0.4);
}

@media (max-width: 620px) {
  .lp .pl-form { max-width: none; }
  .lp .pl-field {
    flex-direction: column;                /* side by side leaves the input too narrow to read */
    align-items: stretch;
    gap: 6px;
    padding: 8px;
    border-radius: 26px;
  }
  .lp .pl-field .pl-input,
  .lp .pl-field .pl-input:focus { padding: 12px 14px; text-align: center; }
  .lp .pl-go { justify-content: center; padding: 15px 24px; }
  .lp .pl-note { margin-left: 0; text-align: center; }
}

/* ---------- what follows from the pieces that are not here yet ---------- */

/* The app darkens the foot of the hero photo so a caption can sit on it. There is
   no caption before launch, so the photograph shows exactly as it was taken. */
.lp .lp-hero-visual .lp-photo-card::before { display: none; }

/* Three footer columns instead of four: the Legal column returns on launch day.
   Wide screens only, so the app's own two-column and one-column rules still
   apply untouched below 980px. */
@media (min-width: 981px) {
  .lp .pl-footer-grid { grid-template-columns: 5fr 2fr 3fr; }
}