/*
 * /leaders/ landing — templates/leaders-landing.php (screen 101a).
 *
 * The page carries .insider-shop, so insiders-style.css already provides
 * the eyebrow, the buttons and the numbered .steps. This file is the
 * rest of the comp: the hero's two-column split, the navy "how it works"
 * band and the three value cards. Every colour is a token.
 */

/* ---------- Hero ---------- */

.insider-shop.leaders-landing .leaders-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 96px;
  background: url('./community-beta/hero-wash.png') center / cover no-repeat;
}

.insider-shop.leaders-landing .leaders-hero__ball {
  position: absolute;
  left: -70px;
  bottom: -60px;
  width: 260px;
  opacity: 0.06;
  transform: rotate(-16deg);
  pointer-events: none;
}

.insider-shop.leaders-landing .leaders-hero__intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}

.insider-shop.leaders-landing .leaders-hero__title {
  margin: 0;
  max-width: 880px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 60px;
  line-height: 1.14;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.insider-shop.leaders-landing .leaders-accent { color: var(--coral); }

/* The recognition line. Bigger than the lead under it, because the
   leader has to see themselves in it before anything else is worth
   reading. */
.insider-shop.leaders-landing .leaders-hero__pitch {
  margin: 0 0 14px;
  max-width: 640px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.45;
  color: var(--pkl-navy-500, #1f497d);
}

.insider-shop.leaders-landing .leaders-hero__lead strong {
  font-weight: 700;
  color: var(--pkl-navy-500, #1f497d);
}

.insider-shop.leaders-landing .leaders-hero__lead {
  margin: 0;
  max-width: 660px;
  font-size: 18px;
  line-height: 1.535;
  letter-spacing: 0.025em;
  color: var(--pkl-black-70);
}

.insider-shop.leaders-landing .leaders-hero__pitch {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

/* ---------- How it works (navy) ---------- */

.insider-shop.leaders-landing .leaders-how {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  padding: 92px 0 120px;
}

.insider-shop.leaders-landing .leaders-how__paddle {
  position: absolute;
  left: -30px;
  top: 45%;
  width: 420px;
  opacity: 0.08;
  transform: rotate(20deg);
  pointer-events: none;
}

.insider-shop.leaders-landing .leaders-how__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* The comp's "How it works" eyebrow has no heart beside it. */
.insider-shop.leaders-landing .eyebrow--plain { gap: 0; }

.insider-shop.leaders-landing .leaders-how h2 {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.15;
  color: #fff;
}

.insider-shop.leaders-landing .leaders-how__lead {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.535;
  color: rgba(255, 255, 255, 0.65);
}

/* .steps is a column on the Insiders page; the comp runs it three
   across on this band. */
.insider-shop.leaders-landing .leaders-steps {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  text-align: left;
  width: 100%;
}

.insider-shop.leaders-landing .leaders-btn-cream {
  margin-top: 48px;
  background: var(--yellow);
  color: var(--navy-press);
}

/* ---------- Non-profit, player-first ---------- */

.insider-shop.leaders-landing .leaders-free {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  padding: 96px 0 88px;
  text-align: center;
}

.insider-shop.leaders-landing .leaders-free__ball {
  position: absolute;
  right: -80px;
  top: -60px;
  width: 300px;
  opacity: 0.05;
  transform: rotate(14deg);
  pointer-events: none;
}

.insider-shop.leaders-landing .leaders-free__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.insider-shop.leaders-landing .leaders-free h2 {
  margin: 0;
  max-width: 640px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.2;
  text-wrap: balance;
}

.insider-shop.leaders-landing .leaders-free__lead {
  margin: 0;
  max-width: 640px;
  font-size: 17px;
  line-height: 1.535;
  letter-spacing: 0.025em;
  color: var(--pkl-black-70);
}

.insider-shop.leaders-landing .leaders-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Narrow screens ----------
 * The comp is drawn at 1440px only; below the two-column split the
 * hero stacks, photo last, and the three-ups become one column. */

@media (max-width: 1000px) {
  .insider-shop.leaders-landing .leaders-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .insider-shop.leaders-landing .leaders-card { flex: 1 1 260px; }
}

@media (max-width: 760px) {
  .insider-shop.leaders-landing .leaders-hero { padding: 48px 0 64px; }
  .insider-shop.leaders-landing .leaders-hero__title { font-size: 40px; }
  .insider-shop.leaders-landing .leaders-how { padding: 64px 0 76px; }
  .insider-shop.leaders-landing .leaders-how h2,
  .insider-shop.leaders-landing .leaders-free h2 { font-size: 32px; }
  .insider-shop.leaders-landing .leaders-steps { grid-template-columns: minmax(0, 1fr); }
  .insider-shop.leaders-landing .leaders-free { padding: 64px 0 72px; }
  .insider-shop.leaders-landing .leaders-hero__ball,
  .insider-shop.leaders-landing .leaders-free__ball { display: none; }
}

/* ---------- Signup dialog ----------
 * A centred card on desktop; full-screen below 620px, where a floating
 * box in the middle of a phone reads worse than a screen of its own.
 */

.leaders-dialog {
  position: relative;
  width: min(520px, calc(100% - 40px));
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.35);
  color: var(--ink);
}

.leaders-dialog::backdrop {
  background: rgba(21, 51, 88, 0.55);
  backdrop-filter: blur(2px);
}

/* Out of the flow and in the corner, so it never crowds the heading. */
.leaders-dialog__dismiss {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}

.leaders-dialog__close {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  padding: 16px 20px;
  color: var(--pkl-black-50);
}

.leaders-dialog__close:hover { color: var(--ink); }

.leaders-dialog__body {
  padding: 44px 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.leaders-dialog__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  text-align: center;
}

/* The lead belongs with the title, not floating a full gap below it. */
.leaders-dialog__title + .leaders-dialog__lead { margin-top: -18px; }

.leaders-dialog__lead {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--pkl-black-70);
  text-align: center;
}

.leaders-dialog__actions {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.leaders-dialog__login {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- the application form inside the dialog ---- */

.leaders-dialog .community-owner-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
}

.leaders-dialog .community-owner-form .pkl-field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.leaders-dialog .community-owner-form .lbl {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--pkl-black-70);
}

.leaders-dialog .community-owner-form .pkl-input { width: 100%; }

.leaders-dialog .community-owner-form .pkl-input[readonly] {
  background: var(--pkl-black-06);
  color: var(--pkl-black-50);
}

.leaders-dialog .community-owner-form .pkl-btn { margin-top: 4px; }

@media (max-width: 620px) {
  .leaders-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }

  .leaders-dialog__body {
    padding: 56px 22px 32px;
    gap: 24px;
  }

  .leaders-dialog__title { font-size: 28px; }
}

/* ======================================================================
 * The offer grid, the consumer-screen carousel and the leader-benefit
 * list. Everything above this line predates them.
 *
 * Fonts come from the tokens, never a family name:
 *   --font-display  Winter Draw   headings
 *   --font-body     Nunito        everything else
 * ====================================================================== */

/* ---------- hero: the offer ----------
 * Seven things, as icons. This is the page's whole argument, so it sits
 * above the fold where the team photograph used to be — a leader
 * deciding whether this is worth their evening sees the lot at once.
 */

.insider-shop.leaders-landing .leaders-offer {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

/* Every card is the same box; only the ones with a screen behind them
   turn over. Fixed height so the grid's rows line up whether or not a
   card carries the AI tag. */
.insider-shop.leaders-landing .leaders-offer__item {
  position: relative;
  perspective: 1100px;
  min-height: 212px;
}

.insider-shop.leaders-landing .leaders-offer__face {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  transform-style: preserve-3d;
  /* One motion, start to finish. An ease-out curve decelerates into the
     stop instead of easing at both ends, which is what made the old
     cubic-bezier read as two beats. */
  transition: transform .5s ease-out;
}
.insider-shop.leaders-landing .leaders-offer__item.can-flip .leaders-offer__face { cursor: pointer; }

/* Hover and keyboard focus turn the card; a tap pins it. These are
   kept apart deliberately — when hover ALSO applied to a pinned card,
   clicking one and keeping the pointer on it fought itself: the class
   said flipped, the pointer said flipped, and releasing either sent it
   back mid-turn. :not(.is-flipped) means a pinned card ignores the
   pointer entirely and only ever moves once per gesture. */
.insider-shop.leaders-landing .leaders-offer__item.can-flip:not(.is-flipped) .leaders-offer__face:hover,
.insider-shop.leaders-landing .leaders-offer__item.can-flip:not(.is-flipped) .leaders-offer__face:focus-visible,
.insider-shop.leaders-landing .leaders-offer__item.is-flipped .leaders-offer__face {
  transform: rotateY(180deg);
}

/* Hover is a pointer idea. On touch it is emulated after the tap, so
   the card would turn, settle, then turn again from the same finger. */
@media (hover: none) {
  .insider-shop.leaders-landing .leaders-offer__item.can-flip .leaders-offer__face:hover {
    transform: none;
  }

  /* With no hover state to discover it by, the cue carries the whole
     affordance — so it reads as a control rather than a caption. */
  .insider-shop.leaders-landing .leaders-offer__peek {
    color: var(--pkl-navy-500, #1f497d);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* A tapped card needs a way back that is visible on the back face. */
  .insider-shop.leaders-landing .leaders-offer__item.is-flipped .leaders-offer__backlabel::after {
    content: " · tap to close";
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .72;
  }
  .insider-shop.leaders-landing .leaders-offer__item.is-flipped .leaders-offer__face {
    transform: rotateY(180deg);
  }
}

.insider-shop.leaders-landing .leaders-offer__front,
.insider-shop.leaders-landing .leaders-offer__back {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.insider-shop.leaders-landing .leaders-offer__front {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 18px 22px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(31, 73, 125, .1);
}

.insider-shop.leaders-landing .leaders-offer__back {
  transform: rotateY(180deg);
  background: var(--pkl-navy-500, #1f497d);
  border: 1px solid var(--pkl-navy-500, #1f497d);
}
.insider-shop.leaders-landing .leaders-offer__back picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* The crops are already the card's aspect ratio (1200/884 = 288/212),
   so cover fills it without repositioning. */
.insider-shop.leaders-landing .leaders-offer__back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.insider-shop.leaders-landing .leaders-offer__backlabel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 16px 13px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: #fff;
  background: linear-gradient(to top, rgba(31, 73, 125, .92), rgba(31, 73, 125, 0));
}

/* the quiet "there is something here" cue */
.insider-shop.leaders-landing .leaders-offer__peek {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(31, 73, 125, .42);
}
/* Says what to do, in the terms of whatever is being used to do it.
   A phone has no hover, so "See it" there is an instruction with no
   verb — the card looks identical to the three that do nothing. */
.insider-shop.leaders-landing .leaders-offer__peek::before { content: "See it"; }
.insider-shop.leaders-landing .leaders-offer__peek::after { content: " \2192"; }

@media (hover: none) {
  .insider-shop.leaders-landing .leaders-offer__peek::before { content: "Tap to see"; }
}

/* A flip is motion for its own sake if someone has asked for less of
   it, so that case crossfades instead. */
@media (prefers-reduced-motion: reduce) {
  .insider-shop.leaders-landing .leaders-offer__face { transition: none; }
  .insider-shop.leaders-landing .leaders-offer__item.can-flip:not(.is-flipped) .leaders-offer__face:hover,
  .insider-shop.leaders-landing .leaders-offer__item.can-flip:not(.is-flipped) .leaders-offer__face:focus-visible,
  .insider-shop.leaders-landing .leaders-offer__item.is-flipped .leaders-offer__face { transform: none; }
  .insider-shop.leaders-landing .leaders-offer__back {
    transform: none;
    opacity: 0;
    transition: opacity .2s linear;
  }
  .insider-shop.leaders-landing .leaders-offer__item.can-flip:not(.is-flipped) .leaders-offer__face:hover .leaders-offer__back,
  .insider-shop.leaders-landing .leaders-offer__item.can-flip:not(.is-flipped) .leaders-offer__face:focus-visible .leaders-offer__back,
  .insider-shop.leaders-landing .leaders-offer__item.is-flipped .leaders-offer__back { opacity: 1; }
}

.insider-shop.leaders-landing .leaders-offer__icon {
  display: block;
  width: 46px;
  height: 46px;
  /* The front face is a flex column, so without this the icon is the
     item that gets squeezed when a card's copy runs long — which is
     why the tallest card's icon was 3px shorter than its neighbours
     and its title sat high. */
  flex-shrink: 0;
  /* contain + a left origin is the <img> equivalent of
     preserveAspectRatio="xMidYMid meet": the five new SVGs have five
     different viewBox shapes and all land in the same 46px box. */
  object-fit: contain;
  object-position: center;
}

/* Icon and title on one line. align-items: center keeps a one-line and
   a two-line title both sitting right against the icon. */
.insider-shop.leaders-landing .leaders-offer__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.insider-shop.leaders-landing .leaders-offer__title {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2;
  color: var(--pkl-navy-500, #1f497d);
}

.insider-shop.leaders-landing .leaders-offer__desc {
  display: block;
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.45;
  color: var(--pkl-navy-500, #1f497d);
}

/* Marks the pieces Pickleheart AI actually drafts. A positive claim,
   so it is filled coral rather than the dashed outline an unbuilt
   thing wears elsewhere on this page. */
.insider-shop.leaders-landing .leaders-offer__flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--pkl-coral-300, #eb8d8a);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}

/* a small spark, drawn rather than shipped */
.insider-shop.leaders-landing .leaders-offer__flag::before {
  content: "";
  width: 9px;
  height: 9px;
  background: #fff;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}

.insider-shop.leaders-landing .leaders-hero__act {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.insider-shop.leaders-landing .leaders-hero__free {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  color: rgba(31, 73, 125, .62);
}

/* ---------- what leaders get ---------- */

.insider-shop.leaders-landing .leaders-benefits { padding: 76px 0 80px; }

.insider-shop.leaders-landing .leaders-benefits h2 {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.2;
  color: var(--pkl-navy-500, #1f497d);
}

.insider-shop.leaders-landing .leaders-benefit-list {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 26px 40px;
}

.insider-shop.leaders-landing .leaders-benefit {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  align-items: start;
}

.insider-shop.leaders-landing .leaders-benefit__icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.insider-shop.leaders-landing .leaders-benefit__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2;
  color: var(--pkl-navy-500, #1f497d);
}

.insider-shop.leaders-landing .leaders-benefit__desc {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--pkl-navy-500, #1f497d);
}

/* ---------- closing reassurance ---------- */

.insider-shop.leaders-landing .leaders-free__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 22px 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  color: var(--pkl-navy-500, #1f497d);
}
.insider-shop.leaders-landing .leaders-free__note img { width: 20px; height: auto; }

/* ---------- narrow ---------- */

@media (max-width: 900px) {
  .insider-shop.leaders-landing .leaders-benefits h2 { font-size: 32px; }
  .insider-shop.leaders-landing .leaders-hero__pitch { font-size: 18.5px; }
  .insider-shop.leaders-landing .leaders-benefits { padding: 58px 0 62px; }
}

@media (max-width: 560px) {
  .insider-shop.leaders-landing .leaders-offer { grid-template-columns: minmax(0, 1fr); }
  .insider-shop.leaders-landing .leaders-benefit-list { grid-template-columns: minmax(0, 1fr); }
}

/* Game History and the donation face carry more ink than the rest, and
   for a while they sat at 41px to even that out. They do not any more:
   with the title beside the icon rather than under it, a narrower icon
   starts its title 5px left of every other one, and the ragged left
   edge costs more than the optical weight gained. One size, all seven. */

/* ---------- how it works: a sequence, not a grid ----------
 * Three equal columns read as three options. This is an order of
 * operations, so the steps are joined: the number sits on top, the
 * words under it, and a wavy rail runs between them.
 *
 * The rail is drawn rather than ruled — nothing else on this site is
 * drawn with a straight edge — and it stops at the first and last
 * number rather than running the full width, so it reads as joining
 * them rather than passing behind.
 */

.insider-shop.leaders-landing .leaders-rail { position: relative; margin-top: 52px; }

.insider-shop.leaders-landing .leaders-rail__wave {
  position: absolute;
  /* a sixth in from each edge is the centre of the first and last
     column in a three-column grid */
  left: 16.667%;
  right: 16.667%;
  top: 22px;
  width: auto;
  height: 24px;
  overflow: visible;
}
.insider-shop.leaders-landing .leaders-rail__wave path {
  fill: none;
  stroke: var(--pkl-yellow-200, #f1e5c5);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1 14;
  opacity: .75;
}

.insider-shop.leaders-landing .leaders-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
}

/* The step itself stacks now rather than sitting number-beside-words. */
.insider-shop.leaders-landing .leaders-steps .step {
  display: block;
  text-align: center;
}

/* Bigger, and still the pickleball — the flair is the point. The navy
   ring is what makes the rail stop at the number instead of crossing
   it. */
.insider-shop.leaders-landing .leaders-steps .step-num {
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  font-size: 34px;
  box-shadow: 0 0 0 7px var(--pkl-navy-500, #1f497d);
}

.insider-shop.leaders-landing .leaders-steps .step-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: #fff;
}

.insider-shop.leaders-landing .leaders-steps .step-desc {
  margin: 7px auto 0;
  max-width: 27ch;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .78);
}

@media (max-width: 760px) {
  /* Stacked, so there is nothing to join. */
  .insider-shop.leaders-landing .leaders-rail__wave { display: none; }
  .insider-shop.leaders-landing .leaders-steps { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .insider-shop.leaders-landing .leaders-steps .step-num { width: 60px; height: 60px; font-size: 30px; box-shadow: none; }
}