/* ==========================================================================
   FitnessBlackBelt — programs.css  (Coaching Programs page)
   Hero variant · Plan cards · Comparison matrix · Fit finder
   · Client communication · Onboarding
   Shared components (panel, meter, ring, media) live in base.css.
   ========================================================================== */

/* ==========================================================================
   1. BREADCRUMBS + HERO VARIANT
   ========================================================================== */
.crumbs {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1.25rem;
}
.crumbs a { color: var(--brand-300); transition: color var(--dur); }
.crumbs a:hover { color: var(--brand-200); }
.crumbs span[aria-current] { color: var(--text-soft); }

/* ==========================================================================
   2. PLAN CARDS
   ========================================================================== */
.plans__grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); align-items: start; }
@media (min-width: 940px) { .plans__grid { grid-template-columns: repeat(3, 1fr); } }

.plan {
  display: flex;
  flex-direction: column;
  scroll-margin-top: calc(var(--header-h) + 2rem);
  overflow: hidden;
}

.plan__name {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.12;
  margin-bottom: .55rem;
  padding-right: 4.5rem;
}
.plan__weeks { color: var(--brand-300); font-size: 10px; }

.plan__price {
  display: flex;
  align-items: flex-start;
  gap: .08rem;
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.plan__currency { font-size: clamp(1.1rem, 2vw, 1.4rem); margin-top: .34em; }
.plan__amount { font-size: clamp(2.65rem, 5.2vw, 3.4rem); }

.plan__unit { margin-top: .5rem; color: var(--dim); font-size: 10px; }

.plan__pitch {
  margin: 1.5rem 0 1.85rem;
  font-size: var(--fs-sm);
  color: var(--muted);
  min-height: 5.5em;
}

/* Support-level gauge sits between the CTA and the feature list */
.plan__gauge {
  margin: 1.85rem 0;
  padding: 1.25rem 0;
  border-block: 1px solid var(--line);
}
.plan__gauge-label { display: block; color: var(--dim); margin-bottom: .7rem; font-size: 10px; }

.plan__body { flex: 1; display: flex; flex-direction: column; }
.plan__label { color: var(--brand-300); margin-bottom: 1.35rem; font-size: 10px; }

.plan__features { display: grid; gap: .9rem; flex: 1; }
.plan__features li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-soft);
}
.plan__features li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 12px; height: 12px;
  background: currentColor;
  color: var(--brand-300);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.plan__features--gold li::before { color: var(--gold); }
.plan__features strong { color: #fff; font-weight: 650; }

.plan__bonus {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--line-strong);
}
.plan__bonus-label { display: block; color: var(--gold); margin-bottom: .85rem; font-size: 10px; }
.plan__bonus-items { display: flex; flex-wrap: wrap; gap: .35rem; }
.plan__bonus-items .mono {
  font-size: 10px;
  letter-spacing: .05em;
  padding: .3rem .6rem;
  border-radius: 4px;
  color: var(--text-soft);
  background: rgba(227,190,124,.07);
  border: 1px solid rgba(227,190,124,.18);
}

/* Featured / VIP emphasis */
@media (min-width: 940px) {
  .plan--featured { transform: translateY(-16px); z-index: 2; }
  .plan--featured:hover { transform: translateY(-21px); }
}
.plan--featured .plan__price {
  background: linear-gradient(120deg, #fff, var(--brand-200));
  -webkit-background-clip: text;
  background-clip: text;
}
.plan--featured .plan__name { padding-top: 1.6rem; }

.plan__flag {
  position: absolute;
  top: 0; left: 0;
  padding: .45rem 1rem;
  font-size: 10px;
  letter-spacing: .1em;
  color: #fff;
  background: var(--grad-brand);
  border-radius: 0 0 var(--r-sm) 0;
  z-index: 2;
}

.plan--vip .plan__weeks,
.plan--vip .plan__label { color: var(--gold); }
.plan--vip .plan__price { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; }
.plan__bonus--gold { border-top-color: rgba(227,190,124,.3); }

/* Deep-link arrival pulse (class toggled by programs.js) */
.plan.is-targeted { animation: plan-pulse 2.2s var(--ease-out); }
@keyframes plan-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
  18%  { box-shadow: 0 0 0 5px rgba(139,92,246,.26), var(--shadow-lg); }
  100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
}

/* ==========================================================================
   3. COMPARISON MATRIX
   The features are grouped and each tier header carries a coverage bar
   counted straight off this table (6 / 10 / 12 of 12), so the decision is
   readable before a single row is scanned.
   ========================================================================== */
.compare { overflow: hidden; }

.matrix {
  position: relative;
  isolation: isolate;
  padding: clamp(.6rem, 1.4vw, 1rem);
  border-radius: calc(var(--r-lg) + 4px);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(124,58,237,.22), transparent 62%),
    linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  box-shadow: 0 50px 110px -60px rgba(0,0,0,.95);
}
.matrix__glow {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -12%;
  translate: -50% 0;
  width: 62%;
  height: 46%;
  background: radial-gradient(ellipse at center, rgba(109,40,217,.42), transparent 68%);
  filter: blur(60px);
}

.compare__scroll {
  position: relative;
  overflow-x: auto;
  border-radius: var(--r-lg);
  background: linear-gradient(170deg, var(--surface), var(--bg-2));
  -webkit-overflow-scrolling: touch;
  transition: box-shadow var(--dur);
}
.compare__scroll.has-more { box-shadow: inset -18px 0 26px -22px rgba(167,139,250,.9); }
.compare__scroll.has-prev { box-shadow: inset 18px 0 26px -22px rgba(167,139,250,.9); }
.compare__scroll.has-prev.has-more {
  box-shadow: inset 18px 0 26px -22px rgba(167,139,250,.9),
              inset -18px 0 26px -22px rgba(167,139,250,.9);
}

.compare__hint {
  display: none;
  padding: .85rem 1rem 0;
  text-align: center;
  color: var(--dim);
  font-size: 10px;
}
@media (max-width: 780px) { .compare__hint { display: block; } }

.ctable { width: 100%; min-width: 760px; border-collapse: collapse; font-size: var(--fs-sm); }

/* --- Tier headers, built as mini plan cards ----------------------------- */
.ctable thead th {
  padding: 0;
  vertical-align: bottom;
  border-bottom: 1px solid var(--line-strong);
}
.ctable__spacer {
  padding: 1.5rem 1.35rem !important;
  text-align: left;
  vertical-align: bottom !important;
}
.ctable__spacer .mono { color: var(--dim); font-size: 10px; }

.tierhead {
  display: grid;
  justify-items: center;
  gap: .3rem;
  padding: 1.85rem 1.15rem 1.5rem;
  text-align: center;
}
.tierhead__flag {
  padding: .22rem .55rem;
  margin-bottom: .35rem;
  font-size: 9px;
  letter-spacing: .1em;
  color: #FFFFFF;
  background: var(--grad-brand);
  border-radius: var(--r-pill);
}
.tierhead__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.tierhead__price {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}
.tierhead__unit { font-size: 9px; color: var(--muted); letter-spacing: .05em; }
.tierhead--featured .tierhead__name,
.tierhead--featured .tierhead__price { color: var(--brand-200); }
.tierhead--vip .tierhead__name,
.tierhead--vip .tierhead__price { color: var(--gold-soft); }

/* Coverage counted off the table itself — no invented numbers */
.cov { display: grid; gap: .45rem; width: 100%; max-width: 150px; margin-top: .85rem; }
.cov__bar {
  height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}
.cov__bar i {
  display: block;
  height: 100%;
  width: var(--p, 50%);
  border-radius: 99px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-200));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out) var(--delay, 0ms);
}
.matrix.is-visible .cov__bar i { transform: scaleX(1); }
.cov__num { font-size: 9px; color: var(--dim); letter-spacing: .05em; }
.tierhead--vip .cov__bar i { background: var(--grad-gold); }

/* --- Grouped body ------------------------------------------------------- */
.ctable__grouprow th {
  padding: 1.5rem 1.35rem .7rem;
  text-align: left;
  background: transparent;
  border-bottom: 1px solid var(--line);
}
.ctable__grouprow .mono { font-size: 10px; letter-spacing: .12em; color: var(--brand-300); }
/* The next group header supplies its own rule, so drop the doubled line */
.ctable__group tr:last-child { border-bottom: 0; }

.ctable th[scope='row'] {
  padding: 1.05rem 1.35rem;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--text-soft);
  white-space: nowrap;
  position: sticky;
  left: 0;
  z-index: 2;
  background: linear-gradient(90deg, #131120 86%, rgba(19,17,32,.94));
}
.ctable td { padding: .85rem 1.25rem; text-align: center; }

.ctable tbody tr { border-bottom: 1px solid var(--line); transition: background-color var(--dur); }
.ctable tbody tr:hover { background: rgba(139,92,246,.05); }
.ctable tbody tr:hover th[scope='row'] { color: #FFFFFF; }
.ctable__grouprow:hover { background: transparent !important; }

/* --- Cells -------------------------------------------------------------- */
.cell {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
}
.cell--yes {
  color: var(--brand-200);
  background: rgba(124,58,237,.18);
  border: 1px solid rgba(139,92,246,.35);
}
.cell--yes svg { width: 12px; height: 12px; }
.cell--gold {
  color: var(--gold-soft);
  background: rgba(227,190,124,.14);
  border-color: rgba(227,190,124,.32);
}
.cell--no {
  width: 26px;
  border: 1px dashed rgba(255,255,255,.13);
  background: rgba(255,255,255,.015);
}
.cell--txt {
  min-width: 0;
  height: auto;
  padding: .3rem .65rem;
  border-radius: var(--r-pill);
  font-size: 10px;
  letter-spacing: .05em;
  color: var(--text-soft);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line-strong);
}
.cell--txt-gold { color: var(--gold-soft); border-color: rgba(227,190,124,.3); }

.ctable__col--featured {
  background: rgba(124,58,237,.07);
  box-shadow: inset 1px 0 0 rgba(139,92,246,.2), inset -1px 0 0 rgba(139,92,246,.2);
}
.ctable thead .ctable__col--featured { background: linear-gradient(180deg, rgba(109,40,217,.4), rgba(20,16,34,.9)); }
.ctable__col--vip { background: rgba(227,190,124,.035); }
.ctable thead .ctable__col--vip { background: linear-gradient(180deg, rgba(166,124,61,.3), rgba(20,16,34,.9)); }

.ctable .is-col-hot { background: rgba(139,92,246,.1); }
.ctable .ctable__col--vip.is-col-hot { background: rgba(227,190,124,.09); }

.ctable tfoot td { padding: 1.5rem 1.15rem 1.65rem; }

/* ==========================================================================
   4. FIT FINDER
   Each tier gets a persona, an icon and a factual spec strip, so the choice
   can be made on visuals rather than by reading three bullet lists.
   ========================================================================== */
.fit { position: relative; overflow: hidden; isolation: isolate; }
.fit__glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 58%;
  translate: -50% -50%;
  width: min(1100px, 112vw);
  aspect-ratio: 2.4;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(91,33,182,.25), transparent 66%);
  filter: blur(62px);
}

.fit__grid { display: grid; gap: clamp(1.25rem, 2.4vw, 1.85rem); }
@media (min-width: 900px) {
  .fit__grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
  /* The recommended tier sits proud of the other two */
  .fit__card--featured { margin-top: -1.75rem; }
}

.fit__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(430px, 40vw, 520px);
  padding: clamp(1.75rem, 2.8vw, 2.35rem);
  background:
    linear-gradient(200deg, rgba(139,92,246,.1) 0%, transparent 46%),
    linear-gradient(168deg, rgba(255,255,255,.045), rgba(255,255,255,.008)),
    var(--surface);
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
  transition: transform var(--dur) var(--ease-out);
}
.fit__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  clip-path: inherit;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow var(--dur) var(--ease-out);
}
.fit__card:hover { transform: translateY(-6px); }
.fit__card:hover::before { box-shadow: inset 0 0 0 1px rgba(139,92,246,.5); }
.fit__card > * { position: relative; z-index: 1; }

.fit__card--featured {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(124,58,237,.26), transparent 60%),
    linear-gradient(168deg, rgba(255,255,255,.055), rgba(255,255,255,.01)),
    var(--surface-2);
  box-shadow: 0 44px 90px -50px rgba(76,29,149,.95);
}
.fit__card--featured::before { box-shadow: inset 0 0 0 1px rgba(139,92,246,.42); }
.fit__card--vip {
  background:
    linear-gradient(200deg, rgba(227,190,124,.1) 0%, transparent 46%),
    linear-gradient(168deg, rgba(255,255,255,.045), rgba(255,255,255,.008)),
    var(--surface);
}
.fit__card--vip:hover::before { box-shadow: inset 0 0 0 1px rgba(227,190,124,.5); }

.fit__ribbon {
  position: absolute;
  z-index: 4;
  top: 0;
  left: clamp(1.75rem, 2.8vw, 2.35rem);
  padding: .3rem .7rem;
  font-size: 9px;
  letter-spacing: .1em;
  color: #FFFFFF;
  background: var(--grad-brand);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 10px 22px -10px rgba(124,58,237,1);
}

.fit__top { margin-bottom: 1.6rem; }
.fit__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.15rem;
  border-radius: 16px;
  color: var(--brand-200);
  background: linear-gradient(150deg, rgba(139,92,246,.3), rgba(91,33,182,.1));
  border: 1px solid rgba(139,92,246,.3);
  box-shadow: 0 0 28px -8px rgba(124,58,237,.9);
  transition: transform var(--dur) var(--ease-spring), color var(--dur) var(--ease-out);
}
.fit__icon svg { width: 24px; height: 24px; }
.fit__card:hover .fit__icon { transform: translateY(-3px) rotate(-7deg); color: #FFFFFF; }
.fit__card--vip .fit__icon {
  color: var(--gold-soft);
  background: linear-gradient(150deg, rgba(227,190,124,.22), rgba(166,124,61,.08));
  border-color: rgba(227,190,124,.32);
  box-shadow: 0 0 28px -8px rgba(227,190,124,.75);
}

.fit__persona {
  display: block;
  margin-bottom: .4rem;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.fit__tag { display: block; font-size: 10px; letter-spacing: .09em; color: var(--dim); }
.fit__tag--featured { color: var(--brand-300); }
.fit__tag--vip { color: var(--gold); }

.fit__list { display: grid; gap: .85rem; margin-bottom: 1.75rem; }
.fit__list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--muted);
}
.fit__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .58em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  rotate: 45deg;
  background: var(--brand-400);
}
.fit__card--vip .fit__list li::before { background: var(--gold); }

/* Spec strip — every value here is lifted from the comparison table */
.fit__specs {
  display: grid;
  gap: .7rem;
  margin-top: auto;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.spec { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.spec__label { font-size: 9px; letter-spacing: .09em; color: var(--dim); }
.spec__val { font-size: 10px; color: var(--text-soft); letter-spacing: .05em; }
.spec__dots { display: inline-flex; gap: 4px; }
.spec__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
}
.spec__dots i.is-on {
  background: var(--brand-400);
  border-color: transparent;
  box-shadow: 0 0 9px rgba(139,92,246,.85);
}
.spec__dots--gold i.is-on { background: var(--gold); box-shadow: 0 0 9px rgba(227,190,124,.8); }

.fit__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.35rem;
}
.fit__price {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.fit__price em {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .05em;
  color: var(--dim);
}

/* ==========================================================================
   5. CLIENT COMMUNICATION
   ========================================================================== */
.comms__panel {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(2rem, 4.5vw, 3.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 100% at 0% 0%, rgba(124,58,237,.16), transparent 60%),
    linear-gradient(170deg, var(--surface), var(--bg-2));
}
@media (min-width: 940px) { .comms__panel { grid-template-columns: 1.25fr .75fr; align-items: center; } }

.comms__copy h2 { font-size: var(--fs-2xl); }
.comms__copy .lede strong { color: var(--brand-200); }

.comms__stats { display: grid; gap: 2rem; justify-items: start; }
.comms__points { display: grid; gap: 1.25rem; }
.comms__points li { padding-left: 1.25rem; border-left: 2px solid rgba(139,92,246,.35); }
.comms__points strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 650;
}
.comms__points span { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: .15rem; }

/* ==========================================================================
   6. ONBOARDING — floating cards on a flight path
   ========================================================================== */
.onboard { position: relative; overflow: hidden; isolation: isolate; }
.onboard__glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 60%;
  translate: -50% -50%;
  width: min(1200px, 118vw);
  aspect-ratio: 2.6;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(91,33,182,.24), transparent 68%);
  filter: blur(66px);
}

.flight { position: relative; }

/* Stretched behind the cards, so the rising path tracks them at any width */
.flight__path {
  position: absolute;
  inset: auto 0 0;
  display: none;
  width: 100%;
  height: clamp(210px, 24vw, 290px);
  overflow: visible;
  fill: none;
  stroke: rgba(139,92,246,.4);
  stroke-width: 1.5;
  stroke-dasharray: 3 9;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
@media (min-width: 1040px) { .flight__path { display: block; } }

.flight__cards {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 1.85rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px)  { .flight__cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
  .flight__cards {
    grid-template-columns: repeat(4, 1fr);
    align-items: end;
    /* Room for the tallest card to climb into */
    padding-top: 7.5rem;
  }
}

.fcard { position: relative; }
@media (min-width: 1040px) { .fcard { margin-bottom: var(--lift, 0rem); } }

.fcard__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: clamp(330px, 30vw, 400px);
  padding: clamp(1.7rem, 2.6vw, 2.15rem);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(124,58,237,.16), transparent 58%),
    linear-gradient(168deg, rgba(255,255,255,.06), rgba(255,255,255,.012)),
    rgba(14,12,22,.9);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
  box-shadow: 0 42px 70px -38px rgba(0,0,0,.95);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.fcard:hover .fcard__inner { transform: translateY(-8px); border-color: rgba(139,92,246,.5); }

/* Soft cast shadow on the page — this is what sells the hover */
.fcard__shadow {
  position: absolute;
  z-index: 1;
  left: 12%;
  right: 12%;
  bottom: -18px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(76,29,149,.55), transparent 70%);
  filter: blur(14px);
}

/* Gentle idle drift, offset per card so the row never moves in lockstep */
@media (prefers-reduced-motion: no-preference) {
  .fcard.is-visible .fcard__inner { animation: fcard-drift 7s var(--ease-in-out) var(--drift, 0s) infinite; }
  .fcard.is-visible:hover .fcard__inner { animation-play-state: paused; }
}
@keyframes fcard-drift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -9px; }
}

.fcard__glyph {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1.35rem;
  border-radius: 14px;
  color: var(--brand-200);
  background: linear-gradient(150deg, rgba(139,92,246,.3), rgba(91,33,182,.1));
  border: 1px solid rgba(139,92,246,.3);
  box-shadow: 0 0 24px -8px rgba(124,58,237,.9);
}
.fcard__glyph svg { width: 21px; height: 21px; }

.fcard__step {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 1rem;
  padding: .3rem .65rem;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--brand-300);
  background: rgba(139,92,246,.12);
  border: 1px solid rgba(139,92,246,.22);
  border-radius: 4px;
}
.fcard h3 { margin-bottom: .6rem; font-size: var(--fs-base); font-weight: 650; }
.fcard p { font-size: var(--fs-sm); line-height: 1.68; color: var(--muted); }

.fcard__index {
  position: absolute;
  right: 1.15rem;
  bottom: .6rem;
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.06em;
  color: rgba(255,255,255,.032);
  pointer-events: none;
  user-select: none;
}
.fcard--last .fcard__glyph {
  color: var(--gold-soft);
  background: linear-gradient(150deg, rgba(227,190,124,.22), rgba(166,124,61,.08));
  border-color: rgba(227,190,124,.32);
  box-shadow: 0 0 24px -8px rgba(227,190,124,.75);
}
.fcard--last .fcard__step { color: var(--gold-soft); background: rgba(227,190,124,.1); border-color: rgba(227,190,124,.24); }

.onboard .notice { margin-top: clamp(3.5rem, 7vw, 6rem); }