/* ============================================================
   PRICING PAGE
   Everything here is scoped to .pr-. The page leans on the
   shared primitives in site.css for the shell, buttons,
   eyebrows, the FAQ accordion and the closing CTA, so only the
   layout unique to pricing lives in this file.

   The tier cards deliberately echo the .bk- card idioms from
   book.css rather than importing them. The two pages read as a
   pair, but neither stylesheet should reach into the other;
   changing a booking card should never move a price.
   ============================================================ */

/* ---------- setup notice ----------
   Temporary. Mirrors the .lo-todo treatment on the live online
   page: loud enough that the page cannot be shipped by accident,
   and deleted along with the block it styles. */
.pr-setup{
  border:1px dashed var(--terracotta);border-radius:14px;
  padding:16px 20px;background:rgba(160,83,80,.05);
}
.pr-setup p{font-size:.85rem;line-height:1.6;color:var(--terracotta-deep);margin:0;max-width:72ch}
.pr-setup strong{letter-spacing:.1em;text-transform:uppercase;font-size:.7rem;display:block;margin-bottom:6px}
.pr-setup code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82em}

/* ---------- hero ---------- */
.pr-hero{
  position:relative;
  padding-block:clamp(48px,7vw,88px) clamp(56px,7vw,96px);
  background:var(--sand);
  overflow:hidden;
}
.pr-hero__inner{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,72px);align-items:center;
}
.pr-hero__copy{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px);align-items:flex-start;max-width:34ch}
.pr-hero__copy h1{font-size:clamp(3rem,7vw,5.4rem)}
.pr-hero__copy .lead{max-width:46ch}
.pr-hero__note{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.8rem;color:var(--green);
  border:1px solid var(--green-soft);border-radius:99px;padding:9px 18px;
}
.pr-hero__note svg{width:16px;height:16px;flex:none}
.pr-hero__cta{display:flex;flex-wrap:wrap;gap:12px}

.pr-hero__figure{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5}
.pr-hero__figure img{width:100%;height:100%;object-fit:cover}
.pr-hero__sprig{
  position:absolute;right:-38px;top:-46px;width:clamp(130px,15vw,210px);
  opacity:.5;pointer-events:none;z-index:0;
}

/* ---------- the free class band ----------
   Sits above the prices on purpose. Nobody who has not yet
   practised with Julia should be asked to compare three tiers
   before they have been in a room with her. */
/* ---------- the two ways in ---------- */
/* Two cards, held to a width where they read as a pair rather than
   as a row with something missing. */
.pr-pair{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,28px);max-width:880px;margin-inline:auto;
}
.pr-tier{
  position:relative;display:flex;flex-direction:column;gap:14px;
  background:#fff;border:1px solid var(--sand-deep);border-radius:var(--radius);
  padding:clamp(24px,2.8vw,34px);height:100%;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.pr-tier:hover{transform:translateY(-4px);box-shadow:0 18px 40px -28px rgba(52,56,55,.45)}
.pr-tier--featured{border-color:var(--green);border-width:2px}

.pr-tier__flag{
  position:absolute;top:-13px;left:clamp(24px,2.8vw,34px);
  background:var(--green);color:var(--cream);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  padding:8px 14px;border-radius:99px;
}
.pr-tier__name{font-family:var(--serif);font-size:clamp(1.6rem,2.4vw,2rem);line-height:1.15;font-weight:400;color:var(--green-deep)}
.pr-tier__who{font-size:.86rem;line-height:1.6;color:var(--ink-soft);min-height:2.6em}

.pr-tier__price{display:flex;align-items:baseline;gap:6px}
.pr-tier__amount{font-family:var(--serif);font-size:clamp(2.6rem,4.4vw,3.4rem);line-height:1;font-weight:300;color:var(--ink)}
.pr-tier__per{font-size:.82rem;color:var(--ink-soft)}

.pr-tier__credits{font-size:.95rem;line-height:1.5;color:var(--ink)}
/* The effective rate earns its own line. It is what tells someone
   which of the two is cheaper for the way they actually practise. */
.pr-tier__rate{font-size:.8rem;color:var(--green);letter-spacing:.02em}

.pr-tier__list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.pr-tier__list li{position:relative;padding-left:18px;font-size:.85rem;color:var(--ink-soft);line-height:1.5}
.pr-tier__list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--green-soft);
}
.pr-tier .btn{margin-top:auto;justify-content:center;width:100%}

.pr-signin{margin-top:clamp(20px,2.4vw,28px);font-size:.85rem;color:var(--ink-soft);text-align:center}
.pr-signin a{color:var(--green-deep);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.pr-signin a:hover{color:var(--terracotta-deep)}

/* ---------- what's included ---------- */
.pr-incl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,34px)}
.pr-incl__item{display:flex;gap:12px;align-items:flex-start}
.pr-incl__icon{flex:none;width:22px;height:22px;color:var(--green);margin-top:1px}
.pr-incl__item p{font-size:.92rem;line-height:1.6;color:var(--ink-soft)}
.pr-incl__item strong{display:block;color:var(--ink);font-weight:500;margin-bottom:2px}

/* ---------- how memberships work ---------- */
.pr-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,44px)}
.pr-step{display:flex;flex-direction:column;gap:10px}
.pr-step__num{font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--green-soft)}
.pr-step h3{font-size:clamp(1.3rem,2vw,1.6rem)}
.pr-step p{font-size:.92rem;line-height:1.65;color:var(--ink-soft)}

/* ---------- private groups pointer ---------- */
.pr-private{
  background:var(--sand);border-radius:var(--radius);
  padding:clamp(26px,3.4vw,46px);
  display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between;
}
.pr-private__copy{display:flex;flex-direction:column;gap:10px;max-width:56ch}
.pr-private__copy h3{font-size:clamp(1.5rem,2.4vw,2rem)}
.pr-private__copy p{font-size:.92rem;line-height:1.65;color:var(--ink-soft)}
.pr-private__links{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- responsive ----------
   899px matches book.css and live-online.css so the three
   pages collapse at the same width. */
@media (max-width:1099px){
  .pr-incl{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px){
  .pr-hero__inner{grid-template-columns:1fr}
  .pr-hero__figure{aspect-ratio:16/10;order:-1}
  .pr-hero__copy{max-width:none}
  .pr-pair{grid-template-columns:1fr;max-width:560px}
  .pr-tier__who{min-height:0}
  .pr-how{grid-template-columns:1fr;gap:28px}
}
@media (max-width:599px){
  .pr-incl{grid-template-columns:1fr}
  .pr-private{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
  .pr-hero__cta{flex-direction:column;align-items:stretch;width:100%}
  .pr-hero__cta .btn{width:100%;justify-content:center}
}