@charset "UTF-8";
/* ══════════════════════════════════════════════════════════
   BECOME_A_SLOTH.CSS — this page only.
   Tokens, buttons, header, footer and the shared page-title
   and CTA components live in assets/css.
══════════════════════════════════════════════════════════ */
:root{--rule-w:744px}

/* ── CTA background — the only page-specific part of the
      shared "Come say hi" component. Swap bg-cta.webp in
      this folder to change the photo on this page. ── */
.cta-frame{background-image:url('bg-cta.webp')}

/* ════════════════════════════════════════
   SEC 01 — PAGE TITLE (shared lockup)
════════════════════════════════════════ */

/* ════════════════════════════════════════
   SEC 02 — PRICING PLANS
   Three stacked cards, 1141 wide in a 1920 frame,
   split 59.2 / 40.8 between colour panel and photo.
   Card two mirrors the split. Each carries a rotated
   starburst badge straddling the seam.
════════════════════════════════════════ */
section.bs-sec-02{padding:5.5rem 0 8rem}
.plans{display:flex;flex-direction:column;gap:4rem;max-width:1141px;margin:0 auto}

.plan{
  position:relative;
  display:grid;
  grid-template-columns:59.2% 40.8%;
  border-radius:var(--r-card);
  overflow:visible;               /* badge overhangs the corner */
  min-height:664px;
}
.plan__panel{
  padding:5.5rem 4rem 3rem;
  display:flex;flex-direction:column;justify-content:center;
  border-radius:var(--r-card) 0 0 var(--r-card);
}
.plan__media{overflow:hidden;border-radius:0 var(--r-card) var(--r-card) 0}
.plan__media img{transition:transform .8s var(--ease)}
.plan:hover .plan__media img{transform:scale(1.04)}

.plan--full .plan__panel{background:var(--color-purple)}
.plan--half .plan__panel{background:var(--color-teal)}
.plan--walkin .plan__panel{background:var(--color-pink)}

/* Card two reverses: photo first in the DOM, panel second. */
.plan--rev{grid-template-columns:40.8% 59.2%}
.plan--rev .plan__panel{border-radius:0 var(--r-card) var(--r-card) 0}
.plan--rev .plan__media{border-radius:var(--r-card) 0 0 var(--r-card)}

.plan__title{color:var(--color-white);font-size:clamp(1.7rem,2.9vw,3.5rem);margin-bottom:1.9rem;line-height:1}
.plan__body{color:var(--color-white);/* font-size:1.05rem; */line-height:1.6;margin-bottom:1.5rem;opacity:.96;}
.plan__body:last-of-type{margin-bottom:2.6rem}
.plan__body .lede{display:block}
.plan .btn-ghost{align-self:flex-start}

/* ── Starburst badge ──
   22-point star via clip-path, same technique as the
   homepage .hero-burst. Sits on the panel/photo seam. */
.badge{
  position:absolute;z-index:4;
  width:clamp(120px,10.5vw,175px);
  aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  font-family:var(--font-badge);font-weight:700;
  font-size:clamp(.6rem,.72vw,.85rem);
  line-height:1.22;letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--badge-ink);
  pointer-events:none;
  clip-path:polygon(50.0% 0.0%,54.8% 16.8%,64.1% 2.0%,63.9% 19.5%,77.0% 7.9%,71.9% 24.7%,87.8% 17.3%,78.2% 31.9%,95.5% 29.2%,82.1% 40.6%,99.5% 42.9%,83.5% 50.0%,99.5% 57.1%,82.1% 59.4%,95.5% 70.8%,78.2% 68.1%,87.8% 82.7%,71.9% 75.3%,77.0% 92.1%,63.9% 80.5%,64.1% 98.0%,54.8% 83.2%,50.0% 100.0%,45.2% 83.2%,35.9% 98.0%,36.1% 80.5%,23.0% 92.1%,28.1% 75.3%,12.2% 82.7%,21.8% 68.1%,4.5% 70.8%,17.9% 59.4%,0.5% 57.1%,16.5% 50.0%,0.5% 42.9%,17.9% 40.6%,4.5% 29.2%,21.8% 31.9%,12.2% 17.3%,28.1% 24.7%,23.0% 7.9%,36.1% 19.5%,35.9% 2.0%,45.2% 16.8%);
}
.badge span{display:block;max-width:66%}
.badge--cream{background:var(--badge-cream);left:52%;top:2%;transform:rotate(-5deg)}
.badge--pink{background:var(--badge-pink);color:#2b1a08;left:37%;top:6%;transform:rotate(-9deg)}
.badge--white{background:var(--color-white);color:#14201c;left:45%;top:8%;transform:rotate(-3deg)}

/* ════════════════════════════════════════
   SEC 03 — COME SAY HI
════════════════════════════════════════ */

.btn-ghost:hover {
    background: black;
    border-color: black;
}

/* ── RESPONSIVE ── */
@media(max-width:1199px){
  .plan{min-height:0}
  .plan__panel{padding:4rem 3rem 2.8rem}
}
@media(max-width:991px){
  section.bs-sec-02{padding:3.5rem 0 5rem}
  .plans{gap:2.5rem}
  .plan,.plan--rev{grid-template-columns:1fr}
  .plan__panel,.plan--rev .plan__panel{border-radius:var(--r-card) var(--r-card) 0 0;padding:3rem 2rem 2.5rem}
  .plan__media,.plan--rev .plan__media{border-radius:0 0 var(--r-card) var(--r-card);aspect-ratio:16/10;order:2}
  .badge--cream,.badge--pink,.badge--white{left:auto;right:4%;top:-3%}
}