/* Co-Packaged Optics article: the header's call to action. */

/* ── Header: the conference, under the byline ── */
.article-header .w-intro-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1rem;
  margin: var(--space-md) 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--navy);
}
/* The sentence takes its own line, however short, with the asks beneath it. */
.article-header .w-intro-cta > span { flex: 0 0 100%; }
/* Red, as the closing button is: the post opens and closes on one ask. */
.w-intro-cta-btn {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.w-intro-cta-btn:hover,
.w-intro-cta-btn:focus-visible,
.w-intro-cta-btn:visited { color: #fff; }
.w-intro-cta-btn:hover,
.w-intro-cta-btn:focus-visible { background: #a31930; }
/* The second ask, quieter than the button beside it. */
.w-intro-cta-alt { font-weight: 700; color: var(--navy); white-space: nowrap; }
.w-intro-cta-alt:hover, .w-intro-cta-alt:focus-visible { color: var(--red); }

/* ── Promised Gains: each claim beside its catch ── */
.w-fp { margin: var(--space-md) 0 var(--space-lg); }
.w-fp-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.5; }
.w-fp-table th {
  text-align: left; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0 0.9rem 0.5rem; border-bottom: 2px solid var(--navy); color: var(--navy);
}
.w-fp-table th + th { color: var(--red); border-bottom-color: var(--red); }
.w-fp-table td { vertical-align: top; padding: 0.75rem 0.9rem; border-bottom: 1px solid rgba(var(--navy-rgb), 0.12); width: 50%; }
/* No tint on the fine-print side: the post's own links are red-underlined,
   and red on red reads as noise. The red rule under its heading is enough. */
.w-fp-table td:first-child { color: var(--navy); }
.w-fp-table td + td { color: var(--text); }
.w-fp-table td strong { color: var(--navy); }
@media (max-width: 560px) {
  .w-fp-table, .w-fp-table tbody, .w-fp-table tr, .w-fp-table td { display: block; width: auto; }
  .w-fp-table thead { display: none; }
  .w-fp-table tr { border-bottom: 1px solid rgba(var(--navy-rgb), 0.12); padding: 0.6rem 0; }
  .w-fp-table td { border: 0; padding: 0.15rem 0; }
  .w-fp-table td + td { padding-left: 0.75rem; border-left: 2px solid var(--red); margin-top: 0.3rem; }
}