/* ============================================================
   LEGAL / NEWSLETTER / FAQ — SHARED PAGE STYLES
============================================================ */

.legal-page,
.newsletter-page,
.faq-page {
  position: relative;
  z-index: 1;
  padding: 140px 0 100px;
  min-height: 100vh;
}

/* ---- HEADERS ---- */
.legal-header,
.newsletter-header,
.faq-page-header {
  max-width: 760px;
  margin: 0 auto 60px;
  text-align: center;
}

.legal-header h1,
.newsletter-header h1,
.faq-page-header h1 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: 12px;
}

.legal-date {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 8px;
}

.newsletter-header p,
.faq-page-header p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 28px;
}

/* ---- LEGAL BODY ---- */
.legal-body {
  max-width: 760px;
  margin: 0 auto;
  background: var(--glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  padding: 48px 56px;
}

.legal-body h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  margin: 32px 0 10px;
  padding-top: 24px;
  border-top: 1px solid var(--glass-border);
  letter-spacing: -0.01em;
}

.legal-body h2:first-of-type { margin-top: 16px; }

.legal-body p {
  font-size: 0.925rem;
  color: var(--muted);
  line-height: 1.85;
  margin-bottom: 14px;
}

.legal-body a { color: var(--teal); transition: opacity 0.2s; }
.legal-body a:hover { opacity: 0.8; }

.legal-body strong { color: var(--white); }

.legal-box {
  background: rgba(20,184,166,0.06);
  border: 1px solid rgba(20,184,166,0.2);
  border-radius: var(--r);
  padding: 20px 24px;
  margin: 20px 0 28px;
}

.legal-box ul {
  list-style: none;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legal-box ul li {
  font-size: 0.875rem;
  color: var(--muted);
}

.legal-box ul li::before {
  content: '→ ';
  color: var(--teal);
  font-weight: 700;
}

/* ---- NEWSLETTER PAGE ---- */
.newsletter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 860px;
  margin: 0 auto;
}

.nl-card {
  background: var(--glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: all 0.3s ease;
}

.nl-card:hover {
  border-color: rgba(20,184,166,0.3);
  transform: translateY(-3px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 30px rgba(20,184,166,0.1);
}

.nl-card-header {
  background: linear-gradient(135deg, rgba(20,184,166,0.12), rgba(14,165,233,0.08));
  border-bottom: 1px solid var(--glass-border);
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.nl-issue {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--teal);
  text-transform: uppercase;
}

.nl-date {
  font-size: 0.8rem;
  color: var(--muted);
}

.nl-card-body { padding: 28px 32px; }

.nl-card-body h2 {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 12px;
  color: var(--white);
}

.nl-card-body .nl-intro {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 20px;
}

.nl-card-body h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin: 22px 0 8px;
  letter-spacing: -0.01em;
}

.nl-card-body p {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 12px;
}

.nl-card-body a { color: var(--teal); }

.nl-tip {
  background: rgba(249,115,22,0.07);
  border: 1px solid rgba(249,115,22,0.2);
  border-radius: var(--r);
  padding: 16px 20px;
  margin: 20px 0;
}

.nl-tip-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.nl-tip p {
  font-size: 0.875rem;
  color: #CBD5E1;
  margin-bottom: 0;
}

.nl-prompt {
  background: var(--navy);
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  padding: 16px 20px;
  margin: 16px 0;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  color: #14B8A6;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.nl-card-footer {
  padding: 20px 32px;
  border-top: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.nl-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.nl-tag {
  background: rgba(20,184,166,0.08);
  border: 1px solid rgba(20,184,166,0.2);
  color: var(--teal);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 100px;
}

/* ---- STANDALONE FAQ PAGE ---- */
.faq-page-grid {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-page-item {
  background: var(--glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.2s;
}

.faq-page-item:hover { border-color: rgba(20,184,166,0.3); }

.faq-page-q {
  padding: 22px 28px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  letter-spacing: -0.01em;
  user-select: none;
}

.faq-page-q::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--teal);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.faq-page-item.open .faq-page-q::after {
  transform: rotate(45deg);
}

.faq-page-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.25s ease;
}

.faq-page-item.open .faq-page-a {
  max-height: 400px;
}

.faq-page-a-inner {
  padding: 0 28px 22px;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.85;
  border-top: 1px solid var(--glass-border);
  padding-top: 18px;
  margin: 0 28px;
}

.faq-page-a-inner a { color: var(--teal); }

/* ---- SUBSCRIBE BAR (shared) ---- */
.subscribe-bar {
  max-width: 860px;
  margin: 60px auto 0;
  background: linear-gradient(135deg, rgba(20,184,166,0.08), rgba(14,165,233,0.06));
  border: 1px solid rgba(20,184,166,0.2);
  border-radius: var(--r-xl);
  padding: 40px 48px;
  text-align: center;
}

.subscribe-bar h3 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}

.subscribe-bar p {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 24px;
}

.subscribe-bar .email-form {
  max-width: 480px;
  margin: 0 auto;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 640px) {
  .legal-body { padding: 28px 24px; }
  .nl-card-header, .nl-card-body, .nl-card-footer { padding-left: 20px; padding-right: 20px; }
  .subscribe-bar { padding: 28px 24px; }
  .faq-page-q { padding: 18px 20px; }
  .faq-page-a-inner { margin: 0 20px; padding-top: 14px; }
}