/* ============================================================
   Kerfuffle Membership trial · comparetheproptech.com/kerfufflemembership/trial
   Layered on top of /kerfufflemembership/style.css, which owns the tokens,
   nav, buttons, benefit cards, FAQ, final CTA and footer.
============================================================ */

/* Kerfuffle pink carrying a white label is 3.5:1, under the 4.5:1 AA floor for
   normal-size text. Only the filled buttons are darkened, so the brand pink is
   untouched everywhere it is not behind text. This stylesheet loads on the
   trial page alone, so /kerfufflemembership is unaffected. */
:root {
  --pink-aa:      #D31255;
  --pink-aa-dark: #B80C46;
}
.btn-primary,
.nav-cta-trial { background: var(--pink-aa); }
.btn-primary:hover,
.nav-cta-trial:hover { background: var(--pink-aa-dark); }
.step-icon { background: var(--pink-aa); }

.icon-sprite { display: none; }

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 100;
  background: var(--pink-aa);
  color: var(--white) !important;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  transition: top var(--transition);
}
.skip-link:focus { top: 0; }

a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The shared nav collapses its CTA to the word "Join" on narrow screens.
   This page books a call rather than joining, so the label stays as written. */
@media (max-width: 460px) {
  .nav-cta-trial { font-size: .82rem; padding: 8px 14px; }
  .nav-cta-trial::before { content: none; }
}

.hero-h1 { max-width: 20ch; }

/* ============================================================
   WHAT THE TRIAL INCLUDES
============================================================ */
/* No value badge on these cards, so reclaim the space it reserves. */
.trial-card { padding-bottom: 26px; }

/* ============================================================
   HOW THE TRIAL RUNS
============================================================ */
.trial-steps {
  padding: clamp(70px, 9vw, 120px) 0;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(9,174,157,.08), transparent 60%),
    #11142a;
}
.step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 22px;
  margin-top: 12px;
  list-style: none;
}
@media (max-width: 980px) { .step-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .step-grid { grid-template-columns: 1fr; } }

.step-icon {
  width: 44px; height: 44px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--white);
  margin-bottom: 14px;
}
.step h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 8px;
}
.step p { color: var(--grey-2); font-size: .98rem; }

/* ============================================================
   ELIGIBILITY + EXPECTATIONS
============================================================ */
.trial-panels { padding: clamp(60px, 8vw, 100px) 0; }
.panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}
@media (max-width: 860px) { .panel-grid { grid-template-columns: 1fr; } }

.panel {
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
}
.panel-teal {
  border-color: rgba(9,174,157,.4);
  background:
    linear-gradient(180deg, rgba(9,174,157,.09), transparent 60%),
    linear-gradient(180deg, var(--card), var(--card-2));
}
.panel h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.1rem + .7vw, 1.7rem);
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 18px;
}

.mark-list { list-style: none; display: grid; gap: 13px; }
.mark-list li {
  position: relative;
  padding-left: 26px;
  color: var(--grey-2);
  font-size: .98rem;
}
.mark-list li::before {
  content: "+";
  position: absolute; left: 0; top: -1px;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.4;
}
.mark-teal li::before { color: var(--teal); }
.mark-pink li::before { color: var(--pink); }

/* ============================================================
   FAQ + FINAL CTA
============================================================ */
.faq .faq-item { max-width: 900px; }
.final-cta .join-note { color: var(--grey); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; scroll-behavior: auto !important; }
}