/* ============================================================
   Hidden Gym Co. — Coming Soon
   Charcoal #1C1C1C · Cream #F5EFE6 · Antique Gold #B08D57
   ============================================================ */

:root {
  --bg: #1C1C1C;
  --ink: #F5EFE6;
  --gold: #B08D57;
  --gold-dark: #9e7d4d; /* ~10% darker for hover */
  --muted: rgba(245, 239, 230, 0.55);

  --font-display: "Trajan Pro", "Trajan Pro 3", "Cormorant Garamond", Georgia, serif;
  --font-body: "Neue Haas Grotesk Text Pro", "Neue Haas Grotesk", "Inter", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
}

/* ── Main centred stack ───────────────────────────────────── */
.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px 96px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.logo {
  display: block;
  height: auto;
  max-height: 80px;
  width: auto;
  margin: 0 auto 40px;
}

.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5.5vw, 54px);
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin: 0 0 18px;
  color: var(--ink);
}

.sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.9;
  margin: 0 0 28px;
}

.sub .sub-line {
  display: inline-block;
  margin-top: 2px;
}

/* Gold divider between sub-headline and lede */
.sub::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--gold);
  margin: 24px auto 0;
}

.lede {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink);
  opacity: 0.88;
  max-width: 38ch;
  margin: 0 auto 44px;
}

/* ── Form wrapper ─────────────────────────────────────────── */
.form-wrap {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

/* ============================================================
   MailerLite overrides
   MailerLite injects rules like:
     #mlb2-40329097.ml-form-embedContainer ... .ml-form-embedSubmit button { … !important }
   with specificity (1,2,1). To beat that we use an attribute selector
   [id^="mlb2-"] which behaves like an id for our purposes plus several
   descendant classes, pushing specificity to (0,5,1) + !important chain
   wins by being later in the cascade as well (we could also move this
   stylesheet below their injected <style>, but the attribute-selector
   trick is bullet-proof).
   ============================================================ */

/* Container: transparent, no frame */
[id^="mlb2-"].ml-form-embedContainer,
[id^="mlb2-"].ml-form-embedContainer * {
  font-family: var(--font-body) !important;
  box-sizing: border-box !important;
}

[id^="mlb2-"].ml-form-embedContainer {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  color: var(--ink) !important;
  padding: 0 !important;
}

[id^="mlb2-"].ml-form-embedContainer .ml-form-embedWrapper,
[id^="mlb2-"].ml-form-embedContainer .ml-form-align-center {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 420px !important;
}

/* Hide MailerLite's heading + descriptive copy — we have our own */
[id^="mlb2-"].ml-form-embedContainer .ml-form-embedContent,
[id^="mlb2-"].ml-form-embedContainer .ml-form-embedContent h4,
[id^="mlb2-"].ml-form-embedContainer .ml-form-embedContent p,
[id^="mlb2-"].ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedContent {
  display: none !important;
}

[id^="mlb2-"].ml-form-embedContainer .ml-form-embedBody {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Field labels — hide them; placeholders do the job */
[id^="mlb2-"].ml-form-embedContainer .ml-form-fieldRow label,
[id^="mlb2-"].ml-form-embedContainer label.floating-label {
  display: none !important;
}

/* Email input */
[id^="mlb2-"].ml-form-embedContainer .ml-form-formContent input[type="email"],
[id^="mlb2-"].ml-form-embedContainer .ml-form-formContent input[type="text"],
[id^="mlb2-"].ml-form-embedContainer input[type="email"] {
  width: 100% !important;
  display: block !important;
  background-color: var(--ink) !important;
  color: var(--bg) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 0 14px !important;
  min-height: 48px !important;
  transition: border-color 160ms ease;
}

[id^="mlb2-"].ml-form-embedContainer input[type="email"]::placeholder {
  color: rgba(28, 28, 28, 0.55) !important;
  opacity: 1 !important;
}

[id^="mlb2-"].ml-form-embedContainer input[type="email"]:focus {
  border-color: var(--gold-dark) !important;
  box-shadow: 0 0 0 2px rgba(176, 141, 87, 0.25) !important;
}

/* Submit button */
[id^="mlb2-"].ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button,
[id^="mlb2-"].ml-form-embedContainer .ml-form-embedSubmit button {
  width: 100% !important;
  display: block !important;
  background: var(--gold) !important;
  background-color: var(--gold) !important;
  color: var(--bg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 14px 24px !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background-color 180ms ease;
  box-shadow: none !important;
  min-height: 48px !important;
}

[id^="mlb2-"].ml-form-embedContainer .ml-form-embedSubmit button:hover,
[id^="mlb2-"].ml-form-embedContainer .ml-form-embedSubmit button:focus-visible {
  background: var(--gold-dark) !important;
  background-color: var(--gold-dark) !important;
  color: var(--bg) !important;
}

[id^="mlb2-"].ml-form-embedContainer .ml-form-embedSubmit button:focus-visible {
  outline: 2px solid var(--ink) !important;
  outline-offset: 2px !important;
}

/* Loading state */
[id^="mlb2-"].ml-form-embedContainer .ml-form-embedSubmit button.loading {
  background: var(--gold-dark) !important;
  color: var(--bg) !important;
  opacity: 0.8 !important;
}

/* Success message */
[id^="mlb2-"].ml-form-embedContainer .ml-form-successBody,
[id^="mlb2-"].ml-form-embedContainer .ml-form-successContent,
[id^="mlb2-"].ml-form-embedContainer .ml-form-successContent h4,
[id^="mlb2-"].ml-form-embedContainer .ml-form-successContent p {
  background: transparent !important;
  color: var(--ink) !important;
  text-align: center !important;
  font-family: var(--font-body) !important;
  padding: 0 !important;
}

[id^="mlb2-"].ml-form-embedContainer .ml-form-successContent h4 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  letter-spacing: 0.02em !important;
  margin: 0 0 8px !important;
  text-transform: none !important;
}

[id^="mlb2-"].ml-form-embedContainer .ml-form-successContent p {
  font-size: 15px !important;
  opacity: 0.88 !important;
  margin: 0 !important;
}

/* Error message */
[id^="mlb2-"].ml-form-embedContainer .ml-form-fieldRow.ml-error input,
[id^="mlb2-"].ml-form-embedContainer .ml-error input[type="email"] {
  border-color: #c45a5a !important;
}
[id^="mlb2-"].ml-form-embedContainer .ml-error-message,
[id^="mlb2-"].ml-form-embedContainer .ml-form-fieldRow .ml-error-message {
  color: #e6a6a6 !important;
  font-size: 13px !important;
  margin-top: 6px !important;
  text-align: left !important;
}

/* Footnote / branding link inside form — tidy or hide */
[id^="mlb2-"].ml-form-embedContainer .ml-form-embedPermissions,
[id^="mlb2-"].ml-form-embedContainer .ml-form-embedPermissions p {
  color: var(--muted) !important;
  font-size: 11px !important;
  background: transparent !important;
  padding: 6px 0 0 !important;
  text-align: center !important;
}

/* ── Footer ───────────────────────────────────────────────── */
.foot {
  text-align: center;
  padding: 24px 16px 36px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 520px) {
  .page { padding: 48px 20px 80px; }
  .form-wrap { width: 90%; max-width: 420px; }
  .logo { margin-bottom: 32px; max-height: 72px; }
  .lede { font-size: 15px; max-width: 34ch; margin-bottom: 36px; }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ── Focus visibility ──────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}