/* ==========================================================================
   EmailHelp — Disclaimer page styles (css/pages/disclaimer.css)
   Only disclaimer-specific rules live here: the hero fact row, the prominent
   independence statement, the plain-text trademark list, the address card and
   the dark "how to verify it's us" section. Everything else comes from
   css/style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page hero
   -------------------------------------------------------------------------- */
.disclaimer-hero .page-hero__content { max-width: 840px; }
.disclaimer-hero .lead { max-width: 68ch; }
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-muted-dark);
}
.hero-facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero-facts .icon { width: 1.15em; height: 1.15em; color: var(--cyan); }
.hero-facts .icon--success { color: var(--success); }
.disclaimer-hero .hero__actions { margin-top: 30px; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Independence statement (prominent callout under the hero)
   -------------------------------------------------------------------------- */
.statement .container--narrow { width: min(900px, calc(100% - var(--gutter) * 2)); }
.callout--statement {
  margin: 0;
  gap: 22px;
  padding: clamp(24px, 3.6vw, 36px) clamp(22px, 3.6vw, 40px);
  border: 1px solid transparent;
  border-left-width: 1px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    linear-gradient(135deg, rgba(99, 102, 241, .55), rgba(139, 92, 246, .45) 50%, rgba(34, 211, 238, .55)) border-box;
  box-shadow: var(--shadow-md), 0 0 0 6px rgba(99, 102, 241, .05);
  font-size: 1rem;
}
.callout--statement > div { min-width: 0; }
.callout--statement .eyebrow { margin: 0 0 10px; }
.callout--statement .icon-tile { margin-top: 2px; }
.callout--statement .icon-tile .icon { width: 24px; height: 24px; flex: 0 0 24px; margin: 0; color: #fff; }
.callout--statement__text {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.005em;
  color: var(--text);
  margin: 0 0 14px !important;
}
.callout--statement__note {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.statement__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.statement__facts .tag { white-space: normal; padding: 7px 14px 7px 10px; color: var(--text); background: var(--bg-2); }
.statement__facts .tag .icon { color: var(--success); width: 1.05em; height: 1.05em; }

/* --------------------------------------------------------------------------
   Disclaimer text (TOC + prose)
   -------------------------------------------------------------------------- */
.disclaimer-body .prose h2 { letter-spacing: -.01em; }
.mark-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 1.4em;
}
.mark-list .tag { color: var(--text); background: var(--bg-2); }
.disclaimer-body .prose address {
  margin: 0 0 1.25em;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: var(--bg-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.disclaimer-body .prose address strong { color: var(--text); }
.disclaimer-body .prose .prose__aside { font-size: .92rem; color: var(--text-muted); }
.disclaimer-body .prose .callout { margin-top: 24px; }

/* --------------------------------------------------------------------------
   How to verify it's us (dark section)
   -------------------------------------------------------------------------- */
.verify { position: relative; }
.verify .hero__bg { z-index: 0; }
.verify .container { position: relative; z-index: 1; }
.verify .section-head { margin-bottom: clamp(36px, 5vw, 56px); }
.verify__grid > .card { gap: 12px; }
.verify__grid > .card h3 { font-size: 1.15rem; }
.verify__value {
  font-family: var(--font-heading);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.55;
  color: #fff !important;
  overflow-wrap: anywhere;
}
.verify__value a { color: inherit; text-decoration: none; }
.verify__value a:hover { text-decoration: underline; text-underline-offset: 3px; }
.section--dark .verify__grid .card p strong { color: #fff; font-weight: 600; }
.verify__never {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.verify__never li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .93rem;
  line-height: 1.5;
  color: var(--text-muted-dark);
}
.verify__never .icon { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 3px; color: #F87171; }
.verify__callout { max-width: 880px; margin: clamp(32px, 4vw, 44px) auto 0; }
.section--dark .verify__callout {
  background: rgba(245, 158, 11, .1);
  border-color: rgba(245, 158, 11, .32);
  border-left-color: var(--warning);
}
.section--dark .verify__callout .icon { color: #FBBF24; }
.section--dark .verify__callout p { color: var(--text-muted-dark); }
.section--dark .verify__callout a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.section--dark .verify__callout a:hover { color: var(--cyan); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .callout--statement { flex-direction: column; gap: 16px; }
  .hero-facts { gap: 8px 16px; }
}
@media (max-width: 560px) {
  .statement__facts { justify-content: flex-start; }
  .disclaimer-hero .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .hero-facts, .statement__facts, .verify .hero__bg { display: none; }
  .callout--statement { box-shadow: none; border: 1px solid #000; background: none; }
  .verify { background: none; color: #000; }
}