/* Sip'Stroke — events page: quote widgets + presentation.
   Loads last, so it refines the page's own styles rather than replacing them.
   Palette taken from the site's own tokens: --green #0a1f1a, --green-deep
   #061612, --green-soft #122d25, --gold #d4af7a, --gold-bright #e6c08a,
   --cream #f5f1e8. Cormorant Garamond for figures and headings, Inter else. */

/* == 1 · THE RUNNING FIGURE ==========================================
   Was a cream box on a near-black page — the one bright rectangle on the
   whole site. Now it reads as the page's own gold-on-green. */
.ssq-live{
  margin:20px 0 18px;padding:17px 20px;position:relative;
  background:linear-gradient(180deg,rgba(212,175,122,.11),rgba(212,175,122,.045));
  border:1px solid rgba(212,175,122,.30);
  border-left:3px solid var(--gold,#d4af7a);
  border-radius:3px 12px 12px 3px}
.ssq-live strong{
  display:block;font-family:"Cormorant Garamond",Georgia,serif;
  font-size:34px;line-height:1.02;letter-spacing:-.015em;
  color:var(--gold-bright,#e6c08a)}
.ssq-live span{
  display:block;font-size:12.5px;line-height:1.45;margin-top:7px;
  color:var(--cream,#f5f1e8);opacity:.74}
.ssq-live--quote strong{font-size:22px}

/* == 2 · THE ANSWER AFTER THEY SEND ================================== */
.ssq{
  background:var(--green-soft,#122d25);
  border:1px solid rgba(212,175,122,.26);border-radius:16px;
  padding:32px 34px;box-shadow:0 24px 60px -34px rgba(0,0,0,.9)}
.ssq-eyebrow{
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold,#d4af7a);margin-bottom:11px}
.ssq-headline{
  margin:0 0 11px;font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:34px;line-height:1.14;letter-spacing:-.01em;color:var(--cream,#f5f1e8)}
.ssq-body{margin:0 0 24px;color:var(--cream,#f5f1e8);opacity:.74;line-height:1.6}
.ssq-lines{width:100%;border-collapse:collapse;margin-bottom:16px}
.ssq-lines th{
  text-align:left;font-weight:400;padding:11px 0;
  border-bottom:1px solid rgba(212,175,122,.14);color:var(--cream,#f5f1e8)}
.ssq-lines th em{
  display:block;font-style:normal;font-size:12px;margin-top:3px;
  color:var(--cream,#f5f1e8);opacity:.5}
.ssq-lines td{
  text-align:right;padding:11px 0;border-bottom:1px solid rgba(212,175,122,.14);
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--cream,#f5f1e8)}
.ssq-lines tfoot th,.ssq-lines tfoot td{
  font-weight:400;border-bottom:0;border-top:1px solid rgba(212,175,122,.45);
  padding-top:15px;font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;
  color:var(--gold-bright,#e6c08a)}
.ssq-perhead{margin:0 0 20px;font-size:13px;color:var(--cream,#f5f1e8);opacity:.55}
.ssq-next{
  margin:0;padding:15px 17px;border-radius:10px;font-size:14px;line-height:1.55;
  background:rgba(212,175,122,.08);border:1px solid rgba(212,175,122,.16);
  color:var(--cream,#f5f1e8)}
.ssq-ref{margin:14px 0 0;font-size:12px;color:var(--cream,#f5f1e8);opacity:.5}
.ssq-ref strong{color:var(--gold-bright,#e6c08a)}

/* == 3 · PAGE RHYTHM =================================================
   96px top AND bottom on every section put ~190px of nothing between each
   one. On a page this long that is most of the scrolling. */
.section{padding-top:74px;padding-bottom:74px}
.final-cta{padding-top:88px;padding-bottom:88px}
.section-title{line-height:1.06;margin-bottom:16px}
.section-lead{line-height:1.62}

/* == 4 · THE SIX FEATURE CARDS =======================================
   The grid had gap:0 52px — no row gap at all — and the cards had no
   background or border, so six blocks of text floated in the dark. */
.feature-grid{gap:20px}
.feature{
  padding:26px 26px 28px;border-radius:14px;
  background:rgba(245,241,232,.028);
  border:1px solid rgba(212,175,122,.14);
  transition:border-color .22s ease,background .22s ease,transform .22s ease}
.feature:hover{
  border-color:rgba(212,175,122,.40);
  background:rgba(212,175,122,.055);
  transform:translateY(-3px)}
.feature h3{margin-bottom:11px}

/* == 5 · THE TWO PRICING CARDS ======================================= */
.addon{
  padding:26px 28px;border-radius:14px;
  background:rgba(212,175,122,.045);
  border:1px solid rgba(212,175,122,.22)}
.addon-icon{
  font-size:30px;color:var(--gold-bright,#e6c08a);
  font-family:"Cormorant Garamond",Georgia,serif;line-height:1}

/* == 6 · THE CALCULATOR ============================================== */
.ev-calc{
  border-radius:18px;padding:32px 32px 34px;
  border:1px solid rgba(212,175,122,.26);
  box-shadow:0 26px 64px -38px rgba(0,0,0,.95)}
.ev-opt{transition:background .18s ease,border-color .18s ease,color .18s ease}
.ev-total{
  font-family:"Cormorant Garamond",Georgia,serif;font-size:24px;
  color:var(--cream,#f5f1e8)}
#evAllIn{
  font-family:"Cormorant Garamond",Georgia,serif;font-size:27px;
  color:var(--gold-bright,#e6c08a);letter-spacing:-.01em}
.ev-note{line-height:1.6;opacity:.62}

/* == 7 · BUTTONS ===================================================== */
.btn{border-radius:8px;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px -12px rgba(212,175,122,.6)}
.btn-ghost:hover{border-color:rgba(212,175,122,.6)}

/* == 8 · SMALL SCREENS ===============================================
   Most local event searches happen on a phone. */
@media (max-width:760px){
  .section{padding-top:52px;padding-bottom:52px}
  .final-cta{padding-top:62px;padding-bottom:62px}
  .section-title{font-size:34px}
  .feature{padding:22px 20px 24px}
  .feature h3{font-size:21px}
  .ev-calc{padding:22px 18px 24px;border-radius:14px}
  .ssq{padding:24px 20px;border-radius:14px}
  .ssq-headline{font-size:27px}
  .ssq-live strong{font-size:29px}
  .ssq-lines tfoot th,.ssq-lines tfoot td{font-size:22px}
  .addon{padding:22px 20px}
}