/* Shared components reused across the Crypto IRA page family (hub, self-guided,
   algorithmic, Animus) — hero, trust badges, feature-card rows, numbered steps,
   the two-column "right for you" layout, and the CTA band. Each family page enqueues
   this alongside design-tokens.css and its own page-specific stylesheet.
   All classes are prefixed crypto-ira- to avoid collisions with the theme's own
   unnamespaced legacy CSS (a real bug found in production: the theme's style.css
   already had its own unrelated .steps class).
   A page-specific stylesheet may override any of these per-section (see
   crypto-ira-algorithmic.css's .crypto-ira-alpha-objective overrides for an example). */

/* Trust badges */
.crypto-ira-trust-badges {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.crypto-ira-trust-badges__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}

.crypto-ira-trust-badges__item {
  font-size: 13px;
  line-height: 19.5px;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.4);
}

/* Hero — system spec: flat navy + radial glow, no photo background */
.crypto-ira-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-navy);
}

.crypto-ira-hero__media {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(12, 77, 128, 0.55) 0%, rgba(0, 0, 0, 0) 70%);
}

.crypto-ira-hero__overlay {
  position: relative;
  padding: 120px 0;
}

.crypto-ira-hero__inner {
  max-width: 800px;
  text-align: center;
}

.crypto-ira-hero__title {
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin: 0;
}

.crypto-ira-hero__subhead {
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  max-width: 640px;
  margin: 24px auto 52px;
}

.crypto-ira-hero__cta {
  margin-bottom: 32px;
}

/* Feature-card rows — base pattern (icon chip + title, optional description) */
.crypto-ira-feature-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 56px;
}

/* No padding declared here on purpose — inherits .crypto-ira-card's 32px/24px
   responsive padding (design-tokens.css). This class used to declare its own
   25px/20px, silently overriding .crypto-ira-card's since crypto-ira-shared.css
   loads after design-tokens.css — removed rather than reconciled, to avoid the
   same load-order-dependent footgun found elsewhere this session. */
.crypto-ira-feature-card {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.crypto-ira-feature-card__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 20.3px;
  color: var(--color-title);
  margin: 0;
}

.crypto-ira-feature-card__desc {
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-meta);
  margin: 0;
}

/* Numbered crypto-ira-steps ("How It Works" pattern) */
.crypto-ira-steps {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin-top: 56px;
}

.crypto-ira-step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.crypto-ira-step__number {
  font-size: 11px;
  font-weight: 700;
  line-height: 16.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin: 0 0 16px;
}

.crypto-ira-step__number-rule {
  display: block;
  width: 24px;
  height: 2px;
  margin-top: 6px;
  background: var(--color-orange);
  opacity: 0.6;
}

.crypto-ira-step__icon-chip {
  margin-bottom: 16px;
}

.crypto-ira-step__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  color: var(--color-title);
  margin: 0 0 8px;
}

.crypto-ira-step__desc {
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-meta);
  margin: 0;
}

/* align-items:center vertically centers the arrow against the connector's own box —
   which .crypto-ira-steps' align-items:stretch already sizes to match card height.
   The padding-top:40px removed here was fighting that centering with a magic-number
   offset (correct only for one particular card height), exactly the "fixed
   positioning" Harshal's QA doc asked to avoid. */
.crypto-ira-step-connector {
  flex: 0 0 auto;
  width: 66px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.crypto-ira-step-connector img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.crypto-ira-step-connector::before {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* "Right for you" two-column layout (checklist + image) */
.crypto-ira-right-for-you__row {
  display: flex;
  align-items: center;
  gap: 72px;
}

.crypto-ira-right-for-you__col {
  flex: 1 1 480px;
}

.crypto-ira-right-for-you__eyebrow {
  text-align: left;
  margin-bottom: 12px;
}

/* Specificity note: the base `h2.crypto-ira-section-heading` rule (design-tokens.css) is
   element+class, which outranks a single-class selector regardless of load order — a plain
   `.crypto-ira-right-for-you__heading { text-align: left }` here was silently losing to that
   rule's `text-align: center` on both sections that use this heading ("Is an Equity Crypto IRA
   Right for You?" and "Looking for an Automated Approach?"). Compounding both classes here
   (matching the actual markup, which always carries both) wins outright instead of relying on
   cascade order. */
.crypto-ira-section-heading.crypto-ira-right-for-you__heading {
  text-align: left;
  margin: 0;
}

.crypto-ira-right-for-you__body {
  font-size: 18px;
  line-height: 1.6;
  text-align: left;
  margin: 20px 0 32px;
  max-width: none;
}

.crypto-ira-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.crypto-ira-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.crypto-ira-checklist__item img {
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.crypto-ira-checklist__item span {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-title);
}

.crypto-ira-right-for-you__image {
  flex: 1 1 480px;
  align-self: stretch;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.crypto-ira-right-for-you__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CTA band */
.crypto-ira-cta-band {
  background: var(--color-navy);
  text-align: center;
}

.crypto-ira-cta-band .crypto-ira-section-body {
  color: rgba(255, 255, 255, 0.8);
}

.crypto-ira-cta-band .crypto-ira-section-heading {
  color: #FFFFFF;
}

.crypto-ira-cta-band__cta {
  margin: 32px 0;
  padding: 14px 34px;
  box-shadow: var(--shadow-button-cta);
}

@media (max-width: 1024px) {
  .crypto-ira-right-for-you__row { flex-direction: column; }
  .crypto-ira-right-for-you__col, .crypto-ira-right-for-you__image { flex: 1 1 auto; width: 100%; }
  .crypto-ira-steps { flex-direction: column; gap: 24px; }
  .crypto-ira-step-connector { display: none; }
}

@media (max-width: 640px) {
  .crypto-ira-feature-cards { flex-direction: column; }
  .crypto-ira-btn-primary, .crypto-ira-btn-secondary { display: block; width: 100%; text-align: center; }
}