/* =====================================================
   Saddle Social event page — saddle-social.css
   Loads AFTER style.css; only page-specific pieces live here.
   ===================================================== */

/* header: campaign page keeps just logo + one CTA */
.ss-header .wrap{justify-content:space-between}
.ss-header .logo-sub{white-space:nowrap}
.ss-nav-cta{
  font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;border:1px solid currentColor;padding:10px 20px;
}
.ss-header.scrolled{
  background:rgba(250,247,240,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--ink);padding:14px 0;box-shadow:0 1px 0 var(--line);
}

/* hero */
.ss-hero{min-height:92svh}
/* On short phone screens the bottom-anchored hero content can ride up
   under the fixed header — reserve the header's height at the top. */
.ss-hero .hero-inner{padding-top:calc(110px + env(safe-area-inset-top))}
.ss-hero .hero-media img{object-position:center 42%}
.ss-chips{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px}
.ss-chips span{
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-image);padding:10px 18px;border-radius:999px;
  background:rgba(22,41,31,.55);border:1px solid rgba(245,239,227,.22);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.ss-chips b{font-weight:500;color:var(--gold)}

/* idea section */
.ss-idea-copy{color:var(--ink-soft);max-width:30em;margin-top:20px;font-size:1.02rem}

/* timeline */
.ss-morning{background:var(--bg-alt)}
.ss-timeline{margin-top:clamp(40px,6vw,64px);position:relative;max-width:720px}
.ss-timeline::before{
  content:"";position:absolute;left:calc(clamp(56px,9vw,84px) / 2);top:8px;bottom:8px;
  width:1px;background:linear-gradient(var(--gold) 60%,transparent);
}
.ss-step{display:flex;gap:clamp(22px,4vw,40px);padding:0 0 clamp(34px,5vw,48px)}
.ss-step:last-child{padding-bottom:0}
.ss-time{
  flex:0 0 clamp(56px,9vw,84px);text-align:center;position:relative;z-index:1;
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:1.45rem;color:var(--brown);
  background:var(--bg-alt);align-self:flex-start;line-height:1.2;padding:2px 0;
}
.ss-step-body h3{font-size:clamp(1.5rem,2.6vw,1.9rem);color:var(--green);margin-bottom:8px}
.ss-step-body p{color:var(--ink-soft);max-width:32em}
.ss-timeline-note{font-size:.85rem;color:var(--ink-soft);margin-top:26px;font-style:italic}

/* price */
.ss-price-tiers{grid-template-columns:minmax(0,520px);justify-content:center}
.ss-scarcity{
  margin-top:18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);text-align:center;
}

/* register */
.ss-register{background:var(--bg)}
.ss-register-inner{max-width:640px}
.field label small{text-transform:none;letter-spacing:.05em;opacity:.7}
.ss-submit{width:100%;justify-content:center;margin-top:6px}
.ss-submit:disabled{opacity:.55;cursor:wait;transform:none}

/* thank-you / payment */
.ss-thanks{max-width:640px}
.ss-pay-card{
  margin-top:34px;display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,40px);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);
  padding:clamp(24px,4vw,40px);align-items:center;
}
.ss-pay-qr{display:grid;gap:10px;justify-items:center}
.ss-pay-qr img{width:clamp(170px,22vw,222px);height:auto;border:1px solid var(--line)}
.ss-pay-qr span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.ss-pay-details{display:grid;gap:16px;justify-items:start}
.ss-pay-amount{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:2.6rem;color:var(--green)}
.ss-pay-upi{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ss-pay-upi code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92rem;color:var(--ink);
  background:var(--bg-alt);padding:9px 14px;border:1px solid var(--line);
  overflow-wrap:anywhere;
}
.ss-copy{
  font-family:'Jost',sans-serif;font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  background:none;border:1px solid var(--gold-deep);color:var(--gold-deep);
  padding:9px 16px;cursor:pointer;transition:background .3s,color .3s;
}
.ss-copy:hover{background:var(--gold-deep);color:var(--card)}
@media (max-width:620px){
  .ss-pay-card{grid-template-columns:1fr;justify-items:center}
  .ss-pay-details{justify-items:center;text-align:center}
}

/* footer */
.ss-footer{background:var(--bg-alt);border-top:1px solid var(--line);padding:30px 0}

/* sticky mobile CTA */
.ss-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--green-deep);color:#F5EFE3;
  padding:12px clamp(16px,4vw,28px);
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 30px -14px rgba(0,0,0,.4);
  transform:translateY(110%);transition:transform .4s cubic-bezier(.2,.6,.2,1);
}
.ss-sticky.show{transform:none}
.ss-sticky-info{display:grid;line-height:1.45}
.ss-sticky-info b{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:1.1rem}
.ss-sticky-info span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.ss-sticky .btn{padding:13px 26px;flex:none}
@media (min-width:821px){.ss-sticky{display:none}}
@media (prefers-reduced-motion: reduce){.ss-sticky{transition:none}}