/* palette: Cold Start — generated by design/apply_palette_live.py.
   Loaded AFTER shared.css so it wins on specificity ties. */
:root {
  --base-color-brand--purple:       #3DDCC8;
  --base-color-brand--red-pink:     #4B8FE8;
  --base-color-brand--yellow:       #A78BFA;
  /* the two "orange" tokens drive ~190 elements (designations, icon circles,
     step badges, card borders) — they go COOL so warm stays rare. */
  --base-color-brand--orange-light: #3DDCC8;
  --base-color-brand--orange-dark:  #4B8FE8;
  --base-color-brand--brown-dark:   #07242E;
  --base-color-neutral--black:      #070B0F;
}

/* --- the one warm accent: CTAs only ------------------------------------ */
/* :not(.is-disabled) matters — the bundle greys the submit button out until the
   form is valid via .is-disabled{background-image:none}, and a bare !important
   gradient here paints straight over that state. */
.button.is-form-submit:not(.is-disabled) {
  background-image: linear-gradient(90deg, #FF6A14, #FF5500) !important;
}
.button.is-form-submit:not(.is-disabled):hover {
  background-image: linear-gradient(270deg, #FF6A14, #FF5500) !important;
}
.button.is-form-submit.is-disabled {
  background-image: none !important;
  background-color: #b1b1b1 !important;
  color: #373737 !important;
}
/* Send OTP is a secondary step inside the form, not the form's action, so it
   takes the cool ramp instead of the warm accent. The base rule only animates
   background-color, so the transition is restated for the gradient. */
.button-otp {
  background-image: linear-gradient(90deg, #3DDCC8, #4B8FE8) !important;
  transition: background-image .2s !important;
}
.button-otp:hover {
  background-image: linear-gradient(270deg, #3DDCC8, #4B8FE8) !important;
}
.blur-top-btn      { background-color: #FF6A14 !important; }

/* --- text on LIGHT surfaces -------------------------------------------- */
/* .text-color-orange sits on white alumni cards; the ramp aqua is 1.7:1 there.
   Deep teal keeps the family and passes at 5.47:1 (the old #f50 was 3.2:1). */
.text-color-orange { color: #0F766E !important; }

/* --- literals that bypass the tokens ----------------------------------- */
.btn-animate-chars {
  background-image: linear-gradient(270deg, #3DDCC8, #4B8FE8 50%, #A78BFA) !important;
}
.blob-btn {
  background-image: radial-gradient(circle at 50% 100%, #fff 22%, #3DDCC8 61%) !important;
}
.button_close_element { background-color: #4B8FE8 !important; }
.card_how-fde-works   { border-color: #3DDCC8 !important; }
.number-wrap.gradient,
.text-grad2 {
  background-image: linear-gradient(135deg, #4B8FE8, #A78BFA) !important;
}
.text-grad3 {
  background-image: linear-gradient(135deg, #4B8FE8, #A78BFA) !important;
}
.line2, .circle1._2 { background-color: #4B8FE8 !important; }
.line3, .circle1._3 { background-color: #A78BFA !important; }
.countdown-wrap {
  border-color: #4B8FE84d !important;
  background-color: #4B8FE812 !important;
}
.bg-overlay-label.curriculum {
  background-image: linear-gradient(90deg, #0E222A, #010E13) !important;
}
body, .page-wrapper { background-color: #070B0F; }


/* --- press cards are outbound links ------------------------------------ */
/* The cards became <a> so each citation is verifiable. Anchors bring their
   own colour and underline, and the card needs to read as clickable. */
a.media-stat-card {
  color: inherit;
  text-decoration: none;
  transition: border-color .2s, transform .2s;
}
a.media-stat-card:hover {
  border-color: rgba(61, 220, 200, .55);
  transform: translateY(-2px);
}
a.media-stat-card:focus-visible {
  outline: 2px solid #3DDCC8;
  outline-offset: 2px;
}


/* --- four-up stat row --------------------------------------------------- */
/* .stats-grid is 1fr 1fr 1fr; the market-proof row carries four figures. */
.stats-grid.is-four { grid-template-columns: 1fr 1fr 1fr 1fr; }
.stats-grid.is-four .stat-wrap { padding: .5rem 1rem; justify-content: flex-start; }
.stats-grid.is-four .stat-wrap p { margin-top: .5rem; }
.stats-grid.is-four .stat-wrap h3 { margin-top: .75rem; opacity: .75; }
@media screen and (max-width: 991px) {
  .stats-grid.is-four { grid-template-columns: 1fr 1fr; grid-row-gap: 2rem; }
  .stats-grid.is-four .stat-wrap._1st { padding-left: 1rem; }
}
@media screen and (max-width: 479px) {
  .stats-grid.is-four { grid-template-columns: 1fr; }
}

/* the lead figure carries the section - size it up against the other three */
.stats-grid.is-four .stat-wrap.is-lead h2 { font-size: 3.25rem; line-height: 1.1; }
@media screen and (max-width: 991px) {
  .stats-grid.is-four .stat-wrap.is-lead h2 { font-size: 2.75rem; }
}


/* --- Option B: live-SVG Venn -------------------------------------------- */
.venn-live-wrap { display: flex; justify-content: center; }
.venn-live { width: 100%; max-width: 420px; height: auto; }
.venn-live .vn-lbl {
  fill: #fff; font-size: 15px; font-weight: 500;
  font-family: inherit; letter-spacing: .2px;
}
.venn-live .vn-core {
  fill: #fff; font-size: 15px; font-weight: 700; font-family: inherit;
}


/* --- work-cycle serpentine flow ---------------------------------------- */
.cflow { position: relative; }
.cflow__list { list-style: none; margin: 0; padding: 0; }
/* consecutive cards overlap vertically - this is what keeps the run short */
.cflow__item + .cflow__item { margin-top: -2.625rem; }
.cflow__item { display: flex; }
.cflow__item--l { justify-content: flex-start; }
.cflow__item--r { justify-content: flex-end; }

/* every card identical: same width, same height, content centred inside */
.cflow__card {
  display: flex; gap: .9rem; align-items: center;
  background: #fff; border: 1px solid rgba(7,36,46,.14); border-radius: .875rem;
  padding: 1rem 1.15rem; width: 41%; min-height: 7.5rem;
  box-shadow: 0 1px 2px rgba(7,36,46,.05);
}
.cflow__icon {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: .625rem;
  display: grid; place-items: center; color: #0F766E;
  background: rgba(61,220,200,.13); border: 1px solid rgba(61,220,200,.4);
}
.cflow__icon svg { width: 1.375rem; height: 1.375rem; }
.cflow__text h3 { margin: 0 0 .3rem; }
.cflow__text p { margin: 0; opacity: .72; }

/* the dashed snake between the two columns */
.cflow__spine {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 15%;
  transform: translateX(-50%); pointer-events: none;
}
.cflow__spine svg { width: 100%; height: 100%; }
.cflow__line { fill: none; stroke: rgba(7,36,46,.28); stroke-width: 1.5; stroke-dasharray: 5 6; }
.cflow__dot { fill: #0F766E; }

@media screen and (max-width: 991px) {
  .cflow__card { width: 46%; }
}
@media screen and (max-width: 767px) {
  .cflow__spine, .cflow__pip { display: none; }
  .cflow__item--l, .cflow__item--r { justify-content: stretch; }
  .cflow__card { width: 100%; min-height: 0; }
  .cflow__item + .cflow__item { margin-top: .75rem; }
}

/* dots live outside the stretched SVG so they stay circular */
.cflow__pip {
  position: absolute; width: .5rem; height: .5rem; border-radius: 50%;
  background: #0F766E; transform: translate(-50%, -50%);
}

/* the flow is self-spacing; the stock section padding is too generous */
#fde-work-cycle .padding-section-medium { padding-top: 3.5rem; padding-bottom: 3.5rem; }