/* ============================================================
   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.
============================================================ */

/* --pink-aa is the darkened brand pink that carries white text at AA. It is
   defined in proof.css, which both pages load. Only the filled buttons take it,
   so the brand pink is untouched everywhere it is not behind text. */
.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; }

/* Vaboo is a fourth included item now that it comes with the trial. The shared
   grid is three across, which would orphan it on a row of its own; two across
   pairs the four evenly. Bounded below by the shared 640px collapse, because a
   rule outside a media query would otherwise beat it and leave two cramped
   columns on a phone. */
@media (min-width: 641px) {
  .benefit-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ============================================================
   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); }

/* ============================================================
   CTA BAND under the social proof
============================================================ */

/* The proof section used to end with a bare left-aligned button sitting in a
   lot of empty space. This is the same single booking link, given the width of
   the content and the weight of a closing step, with room before the FAQ. */
.cta-band {
  margin-top: 44px;
  margin-bottom: 8px;
  padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 40px);
  background:
    linear-gradient(180deg, rgba(9,174,157,.10), transparent 65%),
    linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid rgba(9,174,157,.42);
  border-radius: var(--radius-lg);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 18px;
}
.cta-band-lead {
  color: var(--grey-2);
  font-size: 1.02rem;
  max-width: 48ch;
  margin: 0;
}
.cta-band-btn {
  font-size: 1.08rem;
  padding: 18px 44px;
}
/* Near full width on a phone, but capped so it does not stretch edge to edge
   on a small tablet. The band's own padding keeps it inside the viewport. */
@media (max-width: 560px) {
  .cta-band-btn { width: 100%; max-width: 340px; padding: 18px 20px; }
}

/* ============================================================
   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; }
}