/* =========================================================================
   <Co-Fit /> — Contact page "Who Valocity Apps is (and isn't) for"
   Qualifies fit before the call so the free Founder Call attracts the right
   people. Sits between the discovery flow and the Process section.

   Deep-navy band so the whole contact page reads as one continuous navy
   surface. Cards are elevated translucent-white surfaces with light text; the
   "for" card carries a warm lime-tinted glow to read as the positive option,
   and the green / rose icon circles are brightened for the dark ground. The
   title keeps the navy-on-lime highlight (mirrors co-faq on navy). Authored at
   1.0 — <main> is rendered at zoom:0.9 on desktop (tokens.css).
   ========================================================================= */

.co-fit {
  position: relative;
  isolation: isolate;
  background: var(--color-primary);          /* deep navy */
  color: #fff;
  padding: 120px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);  /* hairline seam from the discovery flow above */
  overflow: hidden;
  scroll-margin-top: 96px;                   /* clear the sticky nav on #fit jump */
}
/* Subtle top-centred accent glow for depth (mirrors co-alt / co-note). */
.co-fit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(820px 460px at 50% 0%, rgba(232, 180, 0, 0.06), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Self-qualify jump link (lives on the navy discovery aside) --- */
.co-fit-jump {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 180, 0, 0.45);
  padding-bottom: 2px;
  transition: color 200ms var(--ease-out-soft), border-color 200ms var(--ease-out-soft);
}
.co-fit-jump:hover {
  color: #FFFFFF;
  border-bottom-color: var(--color-accent);
}
.co-fit-jump__arrow {
  color: var(--color-accent);
  transition: transform 200ms var(--ease-out-soft);
}
.co-fit-jump:hover .co-fit-jump__arrow { transform: translateY(2px); }

.co-fit__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ---------- Header ------------------------------------------------------- */
.co-fit__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}

/* Eyebrow — translucent chip + lime brand dot on navy. */
.co-fit__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 18px 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.co-fit__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}

.co-fit__title {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(33px, 4.2vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 20px 0;
  text-wrap: balance;
}
/* "(and isn't)" — navy-on-lime highlight (mirrors co-faq on navy). */
.co-fit__title em {
  font-style: normal;
  color: var(--color-primary);
  background: var(--color-accent);
  font-weight: 900;
  padding: 0.04em 0.14em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.co-fit__sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  max-width: 600px;
  margin: 0 auto;
  text-wrap: pretty;
}

/* ---------- Cards -------------------------------------------------------- */
.co-fit__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.co-fit-card {
  background: rgba(255, 255, 255, 0.03);       /* elevated navy surface */
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 22px 48px -30px rgba(0, 0, 0, 0.6);
  transition:
    transform 240ms var(--ease-out-soft),
    box-shadow 240ms var(--ease-out-soft),
    border-color 240ms var(--ease-out-soft),
    background 240ms var(--ease-out-soft);
}
.co-fit-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 180, 0, 0.40);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.7);
}

/* "For" card — promoted to the hero/positive option: a soft lime gradient
   surface lifted off the navy by an ambient drop shadow plus a lime bloom, so
   the eye lands here first. No resting transform — depth comes from light, which
   keeps the top edge level with the muted "not for" card beside it. */
.co-fit-card--for {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      rgba(232, 180, 0, 0.11) 0%,
      rgba(232, 180, 0, 0.035) 58%,
      rgba(232, 180, 0, 0.055) 100%);
  border: 1px solid rgba(232, 180, 0, 0.32);
  box-shadow:
    0 26px 56px -28px rgba(0, 0, 0, 0.6),
    0 0 44px -10px rgba(232, 180, 0, 0.16);
}
.co-fit-card--for:hover {
  border-color: rgba(232, 180, 0, 0.55);
  background:
    linear-gradient(180deg,
      rgba(232, 180, 0, 0.14) 0%,
      rgba(232, 180, 0, 0.05) 58%,
      rgba(232, 180, 0, 0.075) 100%);
  box-shadow:
    0 34px 70px -26px rgba(0, 0, 0, 0.7),
    0 0 56px -8px rgba(232, 180, 0, 0.24);
}
/* Top accent rule — the premium "highlighted plan" cue, lime fading at both ends. */
.co-fit-card--for::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-accent) 28%,
    var(--color-accent) 72%,
    transparent 100%);
  opacity: 0.9;
  pointer-events: none;
}

/* "Best fit" pill — navy-on-lime anchor that names this as the desired column. */
.co-fit-card__tag {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-accent);
  padding: 5px 11px;
  border-radius: 999px;
  box-shadow: 0 6px 16px -8px rgba(232, 180, 0, 0.7);
}

/* "Not for" card — plain elevated navy surface. */
.co-fit-card--against {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

/* ---------- Card label (eyebrow + dot) ---------------------------------- */
.co-fit-card__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.co-fit-card__label-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
}
.co-fit-card--for .co-fit-card__label-dot { background: #4ADE80; }
.co-fit-card--against .co-fit-card__label-dot { background: #FB7185; }
/* Keep the label clear of the absolutely-positioned "Best fit" pill. */
.co-fit-card--for .co-fit-card__label { padding-right: 78px; }

/* ---------- List + items ------------------------------------------------- */
.co-fit-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.co-fit-card__item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  text-wrap: pretty;
}
.co-fit-card__item + .co-fit-card__item {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
/* On the warm "for" card, a lime-tinted hairline reads cleaner. */
.co-fit-card--for .co-fit-card__item + .co-fit-card__item {
  border-top-color: rgba(232, 180, 0, 0.18);
}
.co-fit-card--against .co-fit-card__item { color: rgba(255, 255, 255, 0.62); }

/* ---------- Icon circle (brightened for the dark ground) ---------------- */
.co-fit-card__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  margin-top: 1px;
  transition: transform 240ms var(--ease-out-soft);
}
.co-fit-card__icon svg { width: 14px; height: 14px; }

.is-pro .co-fit-card__icon { color: #4ADE80; background: rgba(34, 197, 94, 0.18); }
.is-con .co-fit-card__icon { color: #FB7185; background: rgba(244, 63, 94, 0.18); }

.co-fit-card:hover .co-fit-card__icon { transform: scale(1.06); }

/* =========================================================================
   "For" card — row-level polish (scoped so the muted "not for" card is untouched)
   ========================================================================= */

/* Lead phrase of each bullet — white-bold pops against 0.85-white body for a
   one-glance scan of why this is the right fit. */
.co-fit-card--for .co-fit-card__item strong {
  color: #fff;
  font-weight: 700;
}

/* Each row is hover-tactile: a soft rounded lime wash floats behind the text
   (a pseudo-element, so the hairline dividers and padding stay pixel-stable). */
.co-fit-card--for .co-fit-card__item {
  position: relative;
  z-index: 0;
}
.co-fit-card--for .co-fit-card__item::after {
  content: "";
  position: absolute;
  inset: 4px -14px;
  border-radius: 10px;
  background: rgba(232, 180, 0, 0.08);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out-soft);
}
.co-fit-card--for .co-fit-card__item:hover::after { opacity: 1; }

/* Brighter, ringed check circle that pulses + warms as you hover its row. */
.co-fit-card--for .is-pro .co-fit-card__icon {
  box-shadow:
    0 0 0 1px rgba(74, 222, 128, 0.30),
    0 4px 12px -5px rgba(74, 222, 128, 0.5);
  transition:
    transform 240ms var(--ease-out-soft),
    background 240ms var(--ease-out-soft);
}
.co-fit-card--for .co-fit-card__item:hover .co-fit-card__icon {
  transform: scale(1.1);
  background: rgba(34, 197, 94, 0.28);
}

/* ---------- Closing line (anchors both cards to an even bottom) --------- */
.co-fit-card__foot {
  margin: 6px 0 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.66);
  text-wrap: pretty;
}
.co-fit-card--for .co-fit-card__foot {
  border-top-color: rgba(232, 180, 0, 0.18);
  color: rgba(255, 255, 255, 0.82);
}
.co-fit-card__foot strong {
  color: #fff;
  font-weight: 700;
}

/* ---------- Closing CTA (scrolls back to the form) ---------------------- */
.co-fit__cta {
  margin: 44px auto 0;
  text-align: center;
}
.co-fit__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 16px 34px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 14px 34px -14px rgba(232, 180, 0, 0.6);
  transition:
    transform 220ms var(--ease-out-soft),
    box-shadow 220ms var(--ease-out-soft),
    background 220ms var(--ease-out-soft);
}
.co-fit__cta-btn:hover {
  background: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 22px 48px -14px rgba(232, 180, 0, 0.68);
}
.co-fit__cta-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.co-fit__cta-arrow { transition: transform 200ms var(--ease-out-soft); }
.co-fit__cta-btn:hover .co-fit__cta-arrow { transform: translateX(4px); }
.co-fit__cta-note {
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) {
  .co-fit { padding: 96px 0; }
}

/* Stack inside the zoomed range, clear of the 768px zoom toggle. */
@media (max-width: 820px) {
  .co-fit__cards { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 768px) {
  .co-fit { padding: 80px 0; }
  .co-fit__header { margin-bottom: 40px; }
}

@media (max-width: 640px) {
  .co-fit { padding: 64px 0; }
  .co-fit__inner { padding: 0 16px; }
  .co-fit-card { padding: 26px 22px; }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .co-fit-card,
  .co-fit-card__icon,
  .co-fit-jump,
  .co-fit-jump__arrow,
  .co-fit__cta-btn,
  .co-fit__cta-arrow { transition: none; }
  .co-fit-card:hover { transform: none; }
  .co-fit-card:hover .co-fit-card__icon { transform: none; }
  .co-fit-card--for .co-fit-card__item:hover .co-fit-card__icon { transform: none; }
  .co-fit-jump:hover .co-fit-jump__arrow { transform: none; }
  .co-fit__cta-btn:hover { transform: none; }
  .co-fit__cta-btn:hover .co-fit__cta-arrow { transform: none; }
}