/* ============================================================
   book-3-month-coaching.html — the payment fork
   ============================================================

   The step between "Book here" on the 3-Months package and Google Calendar.
   Two options, two different appointment schedules, so the choice has to be
   made before the calendar opens.

   Page head, page body and the nav/footer overrides are the same block the
   other small pages carry (book-a-call, book-a-discovery-call,
   book-a-power-hour), kept identical on purpose so the arrival reads as one
   family. What is new here is .pay — the two option cards, which deliberately
   echo .pk on coaching.css: same apricot frame, same sand fill, same lift on
   hover, so the card the visitor just clicked appears to continue here.
   ============================================================ */

body{
  margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:300;
  font-size:clamp(1rem,.94rem + .28vw,1.0625rem);line-height:1.78;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  display:flex;flex-direction:column;min-height:100vh;
}
[id]{scroll-margin-top:6.5rem}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);width:100%}
.eyebrow{
  font-family:var(--cond);font-weight:400;font-size:clamp(.8125rem,.765rem + .2vw,.875rem);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);line-height:1;
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover,.btn:focus-visible{color:var(--ink-deep);border-color:var(--apricot)}

/* ============================ NAV ============================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;padding:1.6rem 0;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease);
}
.nav__sublink[aria-current="page"]{color:var(--terracotta)}


/* ========================= PAGE HEAD ========================= */
main{flex:1 0 auto}
.phead{background:var(--dune);padding:clamp(8.5rem,15vh,11rem) 0 clamp(3rem,6vw,5rem)}
.phead__t{
  font-family:var(--serif);font-size:clamp(2.6rem,1.4rem + 5.4vw,6rem);
  line-height:.94;letter-spacing:-.04em;margin-top:1.4rem;
}
.phead__t em{font-style:italic;color:var(--terracotta)}
.phead__sub{
  margin-top:clamp(1.2rem,2.4vw,1.8rem);max-width:52ch;
  font-family:var(--serif);font-size:clamp(1.1rem,.98rem + .6vw,1.45rem);
  line-height:1.4;color:var(--ink-soft);
}
/* Page-specific: this standfirst runs the full content measure instead of the
   shared 52ch, so it reads as one band across the head rather than a narrow
   column with empty dune beside it. Everything above stays identical to the
   other small pages. */
.phead__sub--wide{max-width:none}

/* ========================= PAGE BODY ========================= */
.pbody{padding:clamp(3.5rem,7vw,6rem) 0 clamp(5rem,10vw,8rem)}

/* ====================== PAYMENT OPTIONS ======================
   Two equal cards. Equal on purpose: neither option is the recommended one,
   the money is the client's business, so there is no ribbon and no visual
   nudge towards either — unlike the packages on coaching.html, where the
   12-week card is marked. */
.pay{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.4rem,2.6vw,2.4rem);
  align-items:stretch;
  max-width:64rem;margin-inline:auto;
}
/* The group needs a name for screen readers, but the page head already says
   what this is out loud, so the heading itself is not repeated on screen. */
.pay__h{
  grid-column:1/-1;
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.pay__opt{
  display:flex;flex-direction:column;
  border:1.5px solid var(--apricot);border-radius:8px;
  background:var(--sand);padding:clamp(1.7rem,3.2vw,2.8rem);
  transition:box-shadow .55s var(--ease),transform .55s var(--ease);
}
.pay__opt:hover{transform:translateY(-6px);box-shadow:0 56px 92px -56px rgba(83,79,81,.55)}
.pay__k{
  display:block;font-family:var(--cond);font-weight:400;
  font-size:clamp(.8125rem,.765rem + .2vw,.875rem);
  letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta);line-height:1;
}
.pay__t{
  font-family:var(--serif);font-size:clamp(1.65rem,1.15rem + 1.9vw,2.6rem);
  line-height:1.02;letter-spacing:-.035em;margin-top:clamp(.9rem,1.8vw,1.3rem);
}
.pay__t em{font-style:italic;color:var(--terracotta)}
.pay__p{
  margin-top:clamp(1.1rem,2.2vw,1.6rem);
  padding-top:clamp(1.1rem,2.2vw,1.6rem);border-top:1px solid var(--hairline);
  color:var(--ink-soft);font-size:.9875rem;line-height:1.82;
}
/* margin-top:auto rather than a fixed gap — the two write-ups are not the same
   length, and the buttons still have to line up across the pair. */
.pay__foot{
  margin-top:auto;padding-top:clamp(1.4rem,2.6vw,2rem);
  display:flex;justify-content:flex-end;
}
.pay__note{
  max-width:64rem;margin:clamp(1.8rem,3.4vw,2.6rem) auto 0;
  color:var(--ink-soft);font-size:.9125rem;line-height:1.8;
}
.pay__note a{color:var(--terracotta)}
.pay__back{max-width:64rem;margin:clamp(2rem,3.8vw,3rem) auto 0}
/* the arrow points back on this one, so it travels the other way on hover */
.pay__back .btn:hover .arw{transform:translateX(-4px)}

/* ========================= FOOTER ============================ */
.foot{background:var(--ink-deep);color:#FFFFFF;padding:clamp(2.75rem,5.5vw,4.25rem) 0 1.75rem;flex-shrink:0}

/* ====================== RESPONSIVE =========================== */
@media (max-width:1080px){
  .nav__links{
    position:fixed;inset:0 0 auto;top:0;background:var(--cream);
    flex-direction:column;justify-content:center;gap:2rem;height:100dvh;
    clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);margin-bottom:0;
  }
  .nav.is-open .nav__links{clip-path:inset(0 0 0 0)}
  .nav__link{font-size:1.5rem;font-family:var(--serif);letter-spacing:.04em;text-transform:none}
  .burger{display:block;position:relative;z-index:2}
}
@media (max-width:860px){
  /* below this the two cards would be too narrow to hold the headline on one
     line, so they stack and each one runs the full measure */
  .pay{grid-template-columns:1fr}
  .pay__opt:hover{transform:none;box-shadow:none}
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:640px){
  .foot__grid{grid-template-columns:1fr}
  .pay__foot,.pay__back{display:block}
  .pay__foot .btn,.pay__back .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}