/* CubaSignal - Light theme matching reference style */
/* Slate + Amber palette, generous typography & layout */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@700&display=swap');

:root {
  --primary: #0F172A;
  --accent: #F59E0B;
}

body {
  font-family: 'Inter', system_ui, sans-serif;
  background-color: #f8fafc; /* slate-50 */
  color: #1e293b; /* slate-800 */
}

/* Consistent page content area with subtle grid */
.page-content {
  background-image: 
    linear-gradient(rgba(15,23,42,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Typography improvements (inspired by reference) */
h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.heading-serif {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.section-header {
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #0f172a;
}

.disclaimer {
  font-size: 0.75rem;
  line-height: 1.4;
  color: #64748b;
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
}

/* Newsletter form */
.newsletter-form input[type="email"] {
  transition: all 0.2s ease;
  background: white;
  border: 1px solid #cbd5e1;
  color: #1e293b;
}

.newsletter-form input[type="email"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
  outline: none;
}

.btn-primary {
  background-color: var(--accent);
  color: white;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background-color: #b45309;
  transform: translateY(-1px);
}

/* Modern cards - light theme like reference */
.modern-card,
.insight-card,
.trust-card {
  background-color: white;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 1.5rem;
}

.modern-card:hover,
.insight-card:hover,
.trust-card:hover {
  transform: translateY(-8px);
  border-color: #f59e0b;
  box-shadow: 0 25px 50px -12px rgb(15 23 42 / 0.15), 0 10px 10px -6px rgb(15 23 42 / 0.1);
}



/* Subtle grid */
.subtle-grid {
  background-image: 
    linear-gradient(rgba(15,23,42,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Amber gradient accent */
.amber-gradient {
  background: linear-gradient(135deg, #F59E0B, #D97706);
}

/* Better hover for links and cards */
a.group:hover {
  border-color: #f59e0b;
}

/* Consistent page header style */
.page-header {
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

/* Stat numbers */
.stat-number {
  font-variant-numeric: tabular-nums;
}

/* Form inputs */
input, select, textarea {
  background: white;
  border: 1px solid #cbd5e1;
  color: #1e293b;
}

input:focus, select:focus, textarea:focus {
  border-color: #f59e0b;
  outline: none;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2);
}

/* Larger typography in key areas (matching reference) */
.modern-card h3 {
  font-size: 1.35rem;
  line-height: 1.3;
  font-weight: 600;
}

.modern-card p {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Wider comfortable layout feel (matching reference) */
.tail-container {
  max-width: 1440px;
}

/* MailerLite embed — stacked dark glass + amber pill on #subscribe */
#subscribe .ml-embedded {
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

#subscribe .ml-form-embedContainer,
#subscribe #mlb2-45609819.ml-form-embedContainer {
  width: 100% !important;
  display: block !important;
}

#subscribe .ml-form-embedWrapper,
#subscribe #mlb2-45609819 .ml-form-embedWrapper {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: 100% !important;
  width: 100% !important;
  display: block !important;
}

#subscribe .ml-form-embedBody,
#subscribe .ml-form-successBody,
#subscribe #mlb2-45609819 .ml-form-embedBody,
#subscribe #mlb2-45609819 .ml-form-successBody {
  padding: 0 !important;
}

/* Hide ML title/description — site section copy covers this */
#subscribe .ml-form-embedContent,
#subscribe #mlb2-45609819 .ml-form-embedContent {
  display: none !important;
}

#subscribe .ml-form-embedSubmit,
#subscribe #mlb2-45609819 .ml-form-embedSubmit {
  margin: 0 !important;
  float: none !important;
  width: 100% !important;
}

/* Always stacked: names row + email + full-width button */
#subscribe .ml-block-form,
#subscribe #mlb2-45609819 form.ml-block-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  width: 100% !important;
}

#subscribe .ml-form-formContent,
#subscribe #mlb2-45609819 .ml-form-formContent {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.75rem !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
}

/* Prefer First name | Last name above email when ML order differs */
#subscribe .ml-form-fieldRow,
#subscribe #mlb2-45609819 .ml-form-fieldRow {
  margin: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}

#subscribe .ml-form-fieldRow:has(input[name="fields[name]"]),
#subscribe #mlb2-45609819 .ml-form-fieldRow:has(input[name="fields[name]"]) {
  order: 1 !important;
}

#subscribe .ml-form-fieldRow:has(input[name="fields[last_name]"]),
#subscribe #mlb2-45609819 .ml-form-fieldRow:has(input[name="fields[last_name]"]) {
  order: 2 !important;
}

#subscribe .ml-form-fieldRow:has(input[name="fields[email]"]),
#subscribe #mlb2-45609819 .ml-form-fieldRow:has(input[name="fields[email]"]) {
  order: 3 !important;
}

@media (min-width: 640px) {
  #subscribe .ml-form-formContent,
  #subscribe #mlb2-45609819 .ml-form-formContent {
    grid-template-columns: 1fr 1fr !important;
    align-items: stretch !important;
  }

  #subscribe .ml-form-fieldRow:has(input[name="fields[email]"]),
  #subscribe #mlb2-45609819 .ml-form-fieldRow:has(input[name="fields[email]"]) {
    grid-column: 1 / -1 !important;
  }
}

/* Labels hidden — placeholders set via js/main.js for dark-glass fields */
#subscribe .ml-block-form .ml-field-group label,
#subscribe #mlb2-45609819 .ml-field-group label {
  display: none !important;
}

#subscribe .ml-form-fieldRow input,
#subscribe .ml-form-horizontalRow input,
#subscribe #mlb2-45609819 .ml-form-fieldRow input,
#subscribe #mlb2-45609819 .ml-form-horizontalRow input {
  background-color: rgba(15, 23, 42, 0.55) !important;
  background: rgba(15, 23, 42, 0.55) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  border-radius: 9999px !important;
  padding: 1rem 1.5rem !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  height: auto !important;
  width: 100% !important;
  box-shadow: none !important;
  outline: none !important;
}

#subscribe .ml-form-fieldRow input::placeholder,
#subscribe #mlb2-45609819 .ml-form-fieldRow input::placeholder {
  color: rgba(255, 255, 255, 0.50) !important;
}

#subscribe .ml-form-fieldRow input:focus,
#subscribe #mlb2-45609819 .ml-form-fieldRow input:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35) !important;
}

#subscribe .ml-form-embedSubmit button,
#subscribe .ml-form-horizontalRow button,
#subscribe #mlb2-45609819 .ml-form-embedSubmit button,
#subscribe #mlb2-45609819 .ml-form-horizontalRow button {
  background-color: #f59e0b !important;
  background: #f59e0b !important;
  border: none !important;
  border-radius: 9999px !important;
  color: #ffffff !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  padding: 1rem 1.5rem !important;
  width: 100% !important;
  min-width: 0 !important;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.25) !important;
  transition: background-color 0.2s ease !important;
  white-space: normal !important;
}

#subscribe .ml-form-embedSubmit button:hover,
#subscribe #mlb2-45609819 .ml-form-embedSubmit button:hover {
  background-color: #d97706 !important;
  background: #d97706 !important;
}

/* Success state */
#subscribe .ml-form-successContent,
#subscribe #mlb2-45609819 .ml-form-successContent {
  text-align: center !important;
  margin: 0 !important;
  padding: 1rem 1.25rem !important;
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(52, 211, 153, 0.30) !important;
  border-radius: 1rem !important;
}

#subscribe .ml-form-successContent h4,
#subscribe #mlb2-45609819 .ml-form-successContent h4 {
  color: #6ee7b7 !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin: 0 0 0.35rem 0 !important;
}

#subscribe .ml-form-successContent p,
#subscribe #mlb2-45609819 .ml-form-successContent p {
  color: #a7f3d0 !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  text-align: center !important;
  margin: 0 !important;
}

#subscribe .ml-form-checkboxRow,
#subscribe .ml-form-embedPermissions,
#subscribe #mlb2-45609819 .ml-form-checkboxRow,
#subscribe #mlb2-45609819 .ml-form-embedPermissions {
  margin-top: 0.75rem !important;
}

#subscribe .ml-form-checkboxRow .label-description,
#subscribe .ml-form-checkboxRow label p,
#subscribe #mlb2-45609819 .ml-form-checkboxRow .label-description,
#subscribe #mlb2-45609819 .ml-form-checkboxRow label p {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Normalize any leftover landscape markup to stacked */
#subscribe .ml-form-formContent.horozintalForm,
#subscribe #mlb2-45609819 .ml-form-formContent.horozintalForm {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
}

#subscribe .ml-form-horizontalRow,
#subscribe #mlb2-45609819 .ml-form-horizontalRow {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  float: none !important;
  width: 100% !important;
  height: auto !important;
}

#subscribe .ml-form-horizontalRow .ml-input-horizontal,
#subscribe .ml-form-horizontalRow .ml-button-horizontal,
#subscribe .ml-form-horizontalRow .horizontal-fields,
#subscribe #mlb2-45609819 .ml-form-horizontalRow .ml-input-horizontal,
#subscribe #mlb2-45609819 .ml-form-horizontalRow .ml-button-horizontal,
#subscribe #mlb2-45609819 .ml-form-horizontalRow .horizontal-fields {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
}


/* Higher specificity vs MailerLite injected #mlb2-* layout */
#subscribe #mlb2-45609819 form.ml-block-form,
#subscribe .ml-subscribe-form form.ml-block-form,
#subscribe .ml-form-embedContainer form.ml-block-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  width: 100% !important;
  align-items: stretch !important;
}
#subscribe #mlb2-45609819 .ml-form-formContent,
#subscribe .ml-subscribe-form .ml-form-formContent,
#subscribe .ml-form-embedContainer .ml-form-formContent {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.75rem !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
@media (min-width: 640px) {
  #subscribe #mlb2-45609819 .ml-form-formContent,
  #subscribe .ml-subscribe-form .ml-form-formContent,
  #subscribe .ml-form-embedContainer .ml-form-formContent {
    grid-template-columns: 1fr 1fr !important;
  }
  #subscribe #mlb2-45609819 .ml-form-fieldRow:has(input[name="fields[email]"]),
  #subscribe .ml-form-embedContainer .ml-form-fieldRow:has(input[name="fields[email]"]) {
    grid-column: 1 / -1 !important;
  }
}
#subscribe #mlb2-45609819 .ml-form-embedSubmit,
#subscribe #mlb2-45609819 .ml-form-embedSubmit button,
#subscribe .ml-form-embedContainer .ml-form-embedSubmit,
#subscribe .ml-form-embedContainer .ml-form-embedSubmit button {
  width: 100% !important;
  float: none !important;
}

/* Field visual order: First name | Last name, then Email */
#subscribe #mlb2-45609819 .ml-form-fieldRow:has(input[name="fields[name]"]),
#subscribe .ml-form-embedContainer .ml-form-fieldRow:has(input[name="fields[name]"]),
#subscribe .ml-form-fieldRow:has(input[name="fields[name]"]) {
  order: 1 !important;
}
#subscribe #mlb2-45609819 .ml-form-fieldRow:has(input[name="fields[last_name]"]),
#subscribe .ml-form-embedContainer .ml-form-fieldRow:has(input[name="fields[last_name]"]),
#subscribe .ml-form-fieldRow:has(input[name="fields[last_name]"]) {
  order: 2 !important;
}
#subscribe #mlb2-45609819 .ml-form-fieldRow:has(input[name="fields[email]"]),
#subscribe .ml-form-embedContainer .ml-form-fieldRow:has(input[name="fields[email]"]),
#subscribe .ml-form-fieldRow:has(input[name="fields[email]"]) {
  order: 3 !important;
  grid-column: 1 / -1 !important;
}