/* =========================================================
   SECOND SERVING — CLEAN CONSOLIDATED STYLESHEET
   Full drop-in replacement
   ========================================================= */

/* =========================================================
   01. TOKENS / DESIGN KNOBS
   ========================================================= */

:root{
  --ss-shell-max: 1200px;
  --ss-shell-text: #2f3e3a;

  /* surfaces */
  --ss-home-panel-bg: rgba(248,244,236,.35);
  --ss-page-card-bg: rgba(255,255,255,.34);
  --ss-form-panel-bg: rgba(255,255,255,.54);
  --ss-field-bg: rgba(255,255,255,.90);
  --ss-inner-points-bg: rgba(255,255,255,.72);

  /* borders */
  --ss-home-panel-border: rgba(0,0,0,.10);
  --ss-page-card-border: rgba(0,0,0,.08);
  --ss-form-panel-border: rgba(0,0,0,.08);
  --ss-field-border: rgba(0,0,0,.12);
  --ss-inner-surface-border: rgba(0,0,0,.08);

  /* radius */
  --ss-home-panel-radius: 22px;
  --ss-card-radius: 18px;
  --ss-field-radius: 12px;
  --ss-inner-surface-radius: 16px;

  /* spacing */
  --ss-shell-first-top: 8px;
  --ss-shell-stack-gap: 16px;
  --ss-shell-stack-gap-mobile: 10px;

  --ss-home-gap: 18px;
  --ss-home-hero-pad-y: 26px;
  --ss-home-hero-pad-x: 28px;
  --ss-home-panel-pad-y: 22px;
  --ss-home-panel-pad-x: 26px;
  --ss-page-panel-pad-y: 24px;
  --ss-page-panel-pad-x: 28px;
  --ss-card-pad: 22px;

  --ss-home-mobile-pad-y: 20px;
  --ss-home-mobile-pad-x: 18px;
  --ss-page-panel-pad-y-mobile: 20px;
  --ss-page-panel-pad-x-mobile: 18px;
  --ss-card-pad-mobile: 18px;

  /* effects */
  --ss-card-shadow: 0 10px 28px rgba(0,0,0,.06);
  --ss-card-blur: 10px;

  /* buttons */
  --ss-btn-bg: #5c7f4f;
  --ss-btn-bg-hover: #4e6e43;
  --ss-btn-text: #fff;
  --ss-btn-ghost-bg: rgba(255,255,255,.65);
  --ss-btn-ghost-bg-hover: rgba(255,255,255,.90);
  --ss-btn-ghost-text: #3f5c53;
  --ss-btn-soft-bg: rgba(255,255,255,.50);
  --ss-btn-soft-text: #3f5c53;

  /* text */


  --ss-number-color: #546d39;
  --ss-title-color: #39554c;
  --ss-subtitle-color: #4d5a57;
  --ss-body-muted: #55635f;
  --ss-meta-muted: #50605c;
  --ss-text-soft: #5a6864;
  --ss-kicker-color: #5b6b66;
  --ss-accent: #2f5d50;

  /* feedback */
  --ss-success-bg: rgba(94,127,58,.14);
  --ss-success-text: #42592a;
  --ss-success-border: rgba(94,127,58,.20);
  --ss-error-bg: rgba(168,70,45,.10);
  --ss-error-text: #7b3924;
  --ss-error-border: rgba(168,70,45,.18);

  /* availability pills */
    --ss-pill-bg: rgba(94,127,58,.12);
  --ss-pill-text: #4f6d31;
  --ss-distance-near-bg: rgba(92,127,79,.18);
  --ss-distance-near-text: #3f5f34;
  --ss-distance-mid-bg: rgba(214,167,33,.14);
  --ss-distance-mid-text: #8a6a12;
  --ss-distance-far-bg: rgba(183,74,74,.12);
  --ss-distance-far-text: #9b3b3b;

  --ss-expire-urgent-bg: rgba(183,74,74,.18);
  --ss-expire-urgent-text: #8f2f2f;
  --ss-expire-urgent-border: rgba(183,74,74,.25);
  --ss-expire-soon-bg: rgba(214,167,33,.14);
  --ss-expire-soon-text: #8a6a12;
  --ss-expire-soon-border: rgba(214,167,33,.18);

  --ss-posted-pill-bg: rgba(120,110,95,.08);
  --ss-posted-pill-text: #6e6458;
  --ss-posted-pill-border: rgba(120,110,95,.12);

  /* background topo */
  --ss-topo-image: url("https://secondserving.org/wp-content/uploads/2026/04/777.webp");
  --ss-topo-size: 1000px;
  --ss-topo-opacity: .05;
}

/* =========================================================
   02. GLOBAL RHYTHM / PAGE FRAME
   ========================================================= */

html{ overflow-y: scroll; }
body{ min-height: 100vh; }

.ss-page{
  min-height: calc(100vh - 220px);
}

.ss-footer{
  margin-top: 0;
}



/* =========================================================
   04. TYPOGRAPHY / TEXT UTILS
   ========================================================= */

.ss-title,
.ss-home-panel-title{
  margin: 0 0 8px;
  font-size: clamp(28px,4vw,42px);
  line-height: 1.04;
  text-align: center;
  color: var(--ss-title-color);
}

.ss-page-panel .ss-title,
.ss-page-panel .ss-home-panel-title,
.ss-how-panel-title,
.ss-trust-title,
.ss-stats-title{
  text-align: left;
}

.ss-subtitle,
.ss-home-panel-text{
  margin: 0 auto;
  max-width: 680px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ss-subtitle-color);
  text-align: center;
}

.ss-page-panel .ss-subtitle,
.ss-page-panel .ss-home-panel-text,
.ss-trust-text{
  margin: 0;
  max-width: none;
  text-align: left;
}

.ss-home-panel-kicker,
.ss-stats-kicker,
.ss-trust-kicker{
  margin: 0 0 8px;
  color: var(--ss-kicker-color);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ss-trust-title,
.ss-stats-title,
.ss-how-panel-title{
  margin: 0 0 8px;
  font-size: clamp(26px,3vw,34px);
  line-height: 1.12;
  color: var(--ss-title-color);
}

.ss-trust-text,
.ss-how-desc,
.ss-circle-text{
  color: var(--ss-text-soft);
}

.ss-mini{
  font-size: 12px;
  color: #697874;
}

.ss-hero-helper{
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ss-text-soft);
  opacity: .82;
}



/* =========================================================
   16. ANIMATIONS
   ========================================================= */

@keyframes ss-spin{
  to{ transform: rotate(360deg); }
}

@keyframes ss-success-pop{
  0%{ transform: scale(.96); opacity: 0; }
  100%{ transform: scale(1); opacity: 1; }
}


@keyframes ss-partner-feedback-pulse-success{
  0%, 100%{
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0,0,0,.03), 0 0 0 0 rgba(94,127,58,0);
  }
  50%{
    transform: scale(1.012);
    box-shadow: 0 8px 22px rgba(0,0,0,.06), 0 0 0 7px rgba(94,127,58,.14);
  }
}

@keyframes ss-partner-feedback-pulse-error{
  0%, 100%{
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0,0,0,.03), 0 0 0 0 rgba(168,70,45,0);
  }
  50%{
    transform: scale(1.012);
    box-shadow: 0 8px 22px rgba(0,0,0,.06), 0 0 0 7px rgba(168,70,45,.13);
  }
}