/* ============================================================================
   Hallmark cards
   A premium step/feature card: deep teal card with a bold GOLD number (or icon)
   badge straddling the top edge, centered serif title, muted body, and a gold
   reward/footnote line. Learned from a "numbered badge over dark card" pattern,
   rendered in brand teal + gold.

   HOW TO USE
   ----------
   1. Link this file AFTER landing.css + story.css + product.css.
   2. Reuse the existing .plan / .plan-step / .plan-num / .plan-reward markup and
      add the modifier .plan--dark to the .plan container.
   3. For the matching callout, add .reassure--dark to a .reassure block.

   <div class="plan plan--dark">
     <div class="plan-step"><span class="plan-num">1</span><h3>Title</h3>
       <p>Copy.</p><div class="plan-reward"><i class="ti ti-check"></i> Footnote</div></div>
     … up to 4 across …
   </div>
   ============================================================================ */

/* Layered-record cards — bold gold badge straddling the top of a deep teal card */
.plan--dark { margin-top: 84px; gap: 24px; }
.plan--dark .plan-step {
  background: linear-gradient(180deg, #0f3236, #0a2629);
  border: 1px solid rgba(212,169,85,0.18);
  border-radius: 18px;
  align-items: center;
  text-align: center;
  padding: 56px 26px 30px;
  overflow: visible;
  box-shadow: 0 24px 48px -32px rgba(8,30,32,0.9);
}
.plan--dark .plan-num {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  width: 68px;
  height: 68px;
  margin: 0;
  border: 0;
  font-size: 32px;
  font-weight: 700;
  color: #10302f;
  background: radial-gradient(circle at 50% 32%, #e7c473, #c2913f 80%);
  box-shadow: 0 12px 26px -10px rgba(0,0,0,0.65);
}
.plan--dark .plan-step h3 { color: #f5efe2; font-size: 23px; margin: 2px 0 10px; }
.plan--dark .plan-step p { color: rgba(245,239,226,0.78); font-size: 16px; }
.plan--dark .plan-reward {
  justify-content: center;
  margin-top: auto;
  padding-top: 18px;
  border-top-color: rgba(245,239,226,0.14);
  color: var(--gold-soft);
}

/* Matching callout block in the same teal + gold language */
.reassure--dark {
  background: radial-gradient(130% 150% at 0% 0%, rgba(212,169,85,0.12), transparent 58%), linear-gradient(180deg, #0f3236, #0a2629);
  border-color: rgba(212,169,85,0.2);
}
.reassure--dark h4 { color: #f5efe2; }
.reassure--dark p { color: rgba(245,239,226,0.78); }
.reassure--dark .re-seal {
  background: radial-gradient(circle at 50% 32%, #e7c473, #c2913f 80%);
  color: #10302f;
}