/* Design tokens, reset, and shared typography for the Crypto IRA landing page.
   Tokens are translated from the Equity Trust / trustetc.com design system (source of
   truth for all Equity Trust pages, not just this one) — see
   docs/figma-handoff-guidelines.md for the current pointer to that system doc.
   Assumes Open Sans is already enqueued by the parent theme (header.php/functions.php);
   this stylesheet does not load a font itself, relying on inheritance from body. */

:root {
  /* Color */
  --color-navy: #002F5F;
  --color-navy-mid: #0C4D80;
  --color-orange: #F06D1A;
  --color-orange-dark: #D45A10;
  --color-title: #2C2D31;
  --color-body: #4E5056;
  --color-meta: #747678;
  --color-border: #E7E7E7;
  --color-bg-white: #FFFFFF;
  --color-bg-secondary: #F8F9FB;
  --color-bg-chip: #FDEEE3;

  /* Shadow (system: all shadows are navy-tinted) */
  --shadow-video: 0 8px 32px rgba(0, 47, 95, 0.18);
  --shadow-card-hover: 0 6px 24px rgba(0, 47, 95, 0.08);
  --shadow-play-glow: 0 4px 24px rgba(240, 109, 26, 0.4);
  --shadow-button-cta: 0 8px 20px rgba(0, 47, 95, 0.25);

  /* Radius (system scale) */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 100px;
  --radius-circle: 9999px;

  /* Layout (system grid: 12-col / 24px gutter / 1280px max-width) */
  --container-width: 1280px;
  --section-padding-y: 80px;
  --gutter: 24px;
  --margin: 80px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* Neutralize the theme's own reflex.css, which styles the bare <section> tag
   directly (margin-top, padding-top, a colored border-top) — every section on
   every family page carries a single crypto-ira-{name} class and nothing else,
   so this one attribute-selector rule resets all of them, present and future,
   without needing to enumerate each page's section classes by name. */
section[class^="crypto-ira-"] {
  margin-top: 0;
  padding: var(--section-padding-y) 0;
  border-top: none;
}

/* Hero manages its own vertical rhythm via .crypto-ira-hero__overlay's 120px
   padding (per the design system's hero spec) — the generic section padding
   above would double up with it, so cancel it out here specifically. */
section.crypto-ira-hero[class^="crypto-ira-"] {
  padding: 0;
}

body {
  font-family: "Open Sans", sans-serif;
  color: var(--color-body);
  margin: 0;
}

img, svg {
  max-width: 100%;
  display: block;
}

.crypto-ira-container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--margin);
}

.crypto-ira-eyebrow {
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-orange);
  text-align: center;
  margin: 0 0 12px;
}

/* font-weight 700: reverses the 2026-07-17 system-vs-mockup normalization (600) back
   to Harshal's spec, per his 2026-07-28 QA doc and the "mockup/QA notes are the final
   arbiter" rule confirmed 2026-07-24. */
h2.crypto-ira-section-heading {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-navy);
  text-align: center;
  margin: 0;
}

.crypto-ira-section-body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-body);
  text-align: center;
  margin: 24px auto 0;
  max-width: 850px;
}

.crypto-ira-btn-primary,
.crypto-ira-btn-secondary {
  display: inline-block;
  padding: 12px 30px;
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-lg);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* Border is always present (padding above is already reduced 2px/side to
   compensate) so the hover invert below never resizes the button. */
.crypto-ira-btn-primary {
  background: var(--color-orange);
  color: var(--color-bg-white);
  border-color: var(--color-orange);
}

.crypto-ira-btn-primary:hover {
  background: var(--color-bg-white);
  color: var(--color-orange);
  border-color: var(--color-orange);
  transform: translateY(-1px);
}

.crypto-ira-btn-secondary {
  background: transparent;
  color: var(--color-orange);
  border-color: var(--color-orange);
}

.crypto-ira-btn-secondary:hover {
  background: var(--color-orange);
  color: var(--color-bg-white);
  border-color: var(--color-orange);
  transform: translateY(-1px);
}

/* border-radius is 16px specifically (not --radius-lg=8px) — reverses the same
   2026-07-17 normalization as the heading font-weight above, scoped to just this
   class so buttons/icon-chips/images that also use --radius-lg are unaffected. */
.crypto-ira-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 32px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.crypto-ira-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.crypto-ira-icon-chip {
  width: 44px;
  height: 44px;
  background: var(--color-bg-chip);
  border: 1px solid rgba(240, 109, 26, 0.22);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.crypto-ira-icon-chip img {
  width: 20px;
  height: 20px;
}

@media (max-width: 1024px) {
  :root {
    --margin: 40px;
  }
}

@media (max-width: 640px) {
  :root {
    --margin: 20px;
    --section-padding-y: 48px;
  }

  /* Per Harshal's QA doc: cards are 32px padding on desktop, 24px on mobile, sitewide. */
  .crypto-ira-card {
    padding: 24px;
  }
}