@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&display=swap');

:root{--font-display:'Figtree',system-ui,sans-serif;--font-body:'Figtree',system-ui,sans-serif;}

/* SubSplit theme refresh — loaded AFTER each page's inline styles.
   One file to tune the whole site: density, radius language, mobile nav,
   and the shared footer. Inline page styles are the base layer; this file
   overrides only what the refresh changes. */

/* ── 1. Radius language: pills → rounded rects ──────────────────────── */
/* Buttons and nav links lose the 100px capsule look. Small status badges
   (.gc-status, .pill, .tag, .float-pill) keep theirs — tiny pills read fine. */
.btn,
.btn-primary,
.btn-secondary,
.btn-join,
.btn-details,
.nav-link,
.nav-cta,
.nav-logout,
.deep-link,
.support-toggle,
button:not(.support-toggle):not([class*="toggle"]) {
  border-radius: 12px !important;
}

/* ── 2. Compact nav (fixes mobile blob-wrap) ────────────────────────── */
nav .nav-link,
nav .nav-cta {
  white-space: nowrap !important;
  padding: 0.45rem 0.85rem !important;
  font-size: 0.8rem !important;
}
nav .nav-right { flex-wrap: nowrap !important; }
@media (max-width: 480px) {
  nav { padding: 0 1rem !important; }
  nav .logo { font-size: 1.2rem !important; }
  nav .nav-link, nav .nav-cta { padding: 0.4rem 0.65rem !important; font-size: 0.74rem !important; }
  nav .nav-right { gap: 0.4rem !important; }
}

/* ── 3. Type scale: denser, more information above the fold ─────────── */
h1 {
  font-size: clamp(2.1rem, 5.5vw, 4rem) !important;
  line-height: 1.04 !important;
  margin-bottom: 1.1rem !important;
}
.section-title {
  font-size: clamp(1.5rem, 3vw, 2.3rem) !important;
  margin-bottom: 0.75rem !important;
}
.hero-sub, .lede, .section-sub {
  font-size: 0.98rem !important;
  margin-bottom: 1.6rem !important;
  line-height: 1.65 !important;
}
.eyebrow, .section-label, .hero-eyebrow {
  font-size: 0.68rem !important;
  letter-spacing: 0.14em !important;
}

/* ── 4. Hero density (index.html) ───────────────────────────────────── */
/* Desktop: hero no longer forces a full viewport before content. */
.hero { min-height: 82vh !important; padding-bottom: 3.5rem !important; }

/* Mobile: pills hidden entirely (kill the empty scroll). Desktop keeps
   them animating in their scattered positions. Hero gets extra top
   padding so the eyebrow clears the sticky 62px nav on scroll. */
@media (max-width: 760px) {
  .hero {
    min-height: auto !important;
    padding-top: 5rem !important;
    padding-bottom: 2.5rem !important;
    justify-content: flex-start !important;
  }
  .floating-pills { display: none !important; }
  .float-pill { display: none !important; }
}

/* Buy/Sell/Earn strip needs breathing room from the section above
   (service-chip marquee on the homepage). Inline styles set the
   bottom + horizontal margins; this only touches margin-top. */
.three-verbs {
  margin-top: 3.5rem !important;
}
@media (max-width: 700px) {
  .three-verbs {
    margin-top: 2.5rem !important;
  }
}

/* ── Cart button + badge (injected by cart.js, before the hamburger) ── */
.ss-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #f5f2eb;
  background: rgba(245, 242, 235, 0.06);
  border: 1px solid rgba(245, 242, 235, 0.1);
  text-decoration: none;
  flex-shrink: 0;
  margin-left: 0.4rem;
}
.ss-cart-btn:hover { color: #c8f53e; border-color: rgba(200, 245, 62, 0.35); }
.ss-cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: none;
  align-items: center;
  justify-content: center;
  background: #c8f53e;
  color: #0a0a0a;
  border-radius: 100px;
  font-family: 'Figtree', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

/* ── 7. Static hamburger for pages without a built-in mobile menu ─── */
/* index.html and groups.html keep their own #menu-toggle. Every other
   page has a <button class="site-hamburger"> + <div class="site-drawer">
   pair injected into the nav (see below), toggled via a plain onclick. */
.site-hamburger {
  display: none;
  background: rgba(245, 242, 235, 0.06);
  border: 1px solid rgba(245, 242, 235, 0.1);
  border-radius: 10px;
  width: 38px;
  height: 38px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  margin-left: 0.4rem;
}
.site-hamburger span {
  display: block;
  width: 16px;
  height: 2px;
  background: rgba(245, 242, 235, 0.85);
  border-radius: 2px;
  transition: 0.2s;
}
.site-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-hamburger.open span:nth-child(2) { opacity: 0; }
.site-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.site-drawer {
  display: none;
  position: fixed;
  top: 68px;
  right: 0.75rem;
  min-width: 220px;
  background: rgba(17, 17, 17, 0.98);
  border: 1px solid rgba(245, 242, 235, 0.12);
  border-radius: 14px;
  padding: 0.5rem;
  z-index: 999;
  flex-direction: column;
  gap: 0.15rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
}
.site-drawer.open { display: flex; }
.site-drawer a {
  color: rgba(245, 242, 235, 0.85);
  font-size: 0.92rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 500;
  display: block;
}
.site-drawer a:hover { background: rgba(200, 245, 62, 0.08); color: #c8f53e; }

/* Currency selector — custom dropdown (currency-display.js) with inline-SVG
   flags that render on every OS, plus a fully dark menu. */
#ss-cur { position: relative; flex-shrink: 0; margin-left: 0.4rem; }
#ss-cur-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: rgba(200, 245, 62, 0.06); color: #f5f2eb;
  border: 1px solid rgba(200, 245, 62, 0.5); border-radius: 10px;
  padding: 0.3rem 0.5rem; font: 700 0.74rem 'Figtree', sans-serif; cursor: pointer;
}
#ss-cur .ss-cur-flag {
  display: inline-flex; width: 20px; height: 13px; border-radius: 2px;
  overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); flex-shrink: 0;
}
#ss-cur .ss-cur-flag svg { display: block; width: 100%; height: 100%; }
#ss-cur .ss-cur-caret { font-size: 0.6rem; opacity: 0.7; }
#ss-cur-menu {
  display: none; position: absolute; top: calc(100% + 0.4rem); right: 0;
  min-width: 128px; background: #111; border: 1px solid rgba(245, 242, 235, 0.14);
  border-radius: 12px; padding: 0.3rem; z-index: 1000;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
#ss-cur.open #ss-cur-menu { display: block; }
#ss-cur-menu .ss-cur-opt {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  background: none; border: none; color: #f5f2eb; cursor: pointer;
  padding: 0.5rem 0.6rem; border-radius: 8px;
  font: 600 0.82rem 'Figtree', sans-serif; text-align: left;
}
#ss-cur-menu .ss-cur-opt:hover { background: rgba(200, 245, 62, 0.1); color: #c8f53e; }

/* Unified desktop nav pill row (site-nav.js) — same links as the mobile
   drawer, on every page. margin-right:auto keeps the links left (by the logo)
   and pushes the currency selector + hamburger to the right. Hidden on
   mobile, where the hamburger + drawer take over. */
.ss-navlinks { display: flex; align-items: center; gap: 0.5rem; margin-left: 1.1rem; margin-right: auto; }
.ss-navlinks a {
  color: rgba(245, 242, 235, 0.72); border: 1px solid rgba(245, 242, 235, 0.1);
  background: rgba(245, 242, 235, 0.05); padding: 0.45rem 0.8rem; border-radius: 100px;
  font-size: 0.8rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.ss-navlinks a:hover { color: #c8f53e; border-color: rgba(200, 245, 62, 0.3); }
.ss-navlinks a.ss-primary { background: #c8f53e; color: #0a0a0a; border-color: #c8f53e; }
@media (max-width: 860px) {
  .ss-navlinks { display: none !important; }
  #ss-cur { margin-left: auto; }   /* push currency + hamburger to the right on mobile */
}

/* Show the hamburger only on mobile. Hide non-primary nav links so
   only the page's primary CTA + the hamburger remain visible there.
   Skip #menu-toggle — index.html and groups.html use it as their
   own hamburger and shouldn't get hidden by the button-hide rule. */
@media (max-width: 860px) {
  .site-hamburger { display: inline-flex !important; }
  nav .nav-right > a:not(.nav-cta):not(.nav-link.primary),
  nav .nav-right > button:not(.nav-cta):not(#menu-toggle) {
    display: none !important;
  }
  /* For pages without a .nav-right wrapper (like sell.html) where links
     are direct children of nav, hide non-primary ones too. */
  nav > a.nav-link:not(.primary):not(.nav-cta) {
    display: none !important;
  }
  /* Cluster the remaining nav-right (usually just the primary CTA)
     tight against the hamburger. The nav uses justify-content:
     space-between, which would otherwise strand the CTA in the middle. */
  nav .nav-right {
    margin-left: auto !important;
    gap: 0.35rem !important;
  }
}

/* ── 5. Premium polish ──────────────────────────────────────────────── */
/* Softer borders, calmer glow, tighter cards. */
.group-card, .card, .metric, .step, .stat, .notice, .perk {
  border-color: rgba(245, 242, 235, 0.09) !important;
}
.btn-primary:hover { transform: none !important; filter: brightness(1.06); }
.verb-card { border-radius: 14px !important; }

/* ── 6. Shared multi-column footer ──────────────────────────────────── */
/* Structure: brand+blurb+socials | Product links | Company links |
   Resources links, with a bottom bar for legal links + trust badges.
   Identical on every page — HTML block is a byte-for-byte copy so the
   footer never diverges. */
.site-footer {
  background: rgba(17, 17, 17, 0.85);
  border: 1px solid rgba(245, 242, 235, 0.09);
  border-radius: 20px;
  margin: 3.5rem 2rem 1.5rem;
  padding: 2.25rem 2.25rem 1.25rem;
  font-family: 'Figtree', sans-serif;
  color: rgba(245, 242, 235, 0.64);
  position: relative;
  z-index: 1;
}
.site-footer .footer-inner {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(245, 242, 235, 0.08);
  max-width: 1200px;
  margin: 0 auto;
}
.site-footer .footer-brand-mark {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.9rem;
}
/* Drop the "S" square badge — the wordmark is the logo. */
.site-footer .footer-logo-badge { display: none !important; }
.site-footer .footer-brand-name {
  font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 1.65rem;
  letter-spacing: -0.03em;
  color: #f5f2eb;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.site-footer .footer-brand-name span { color: #c8f53e; }

/* Real SubSplit icon (two offset pills) before the wordmark in both
   the nav and the footer. Injected via ::before so no HTML changes
   are needed across all 22 pages. */
nav .logo::before,
.site-footer .footer-brand-name::before {
  content: '';
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  background: url('/assets/subsplit-icon-transparent.svg') center/contain no-repeat;
  margin-right: 0.4em;
  vertical-align: -0.18em;
  flex-shrink: 0;
}
.site-footer .footer-brand-name::before { margin-right: 0; }
.site-footer .footer-brand-tag {
  color: rgba(245, 242, 235, 0.5);
  font-size: 0.72rem;
  margin-top: 0.15rem;
}
.site-footer .footer-blurb {
  color: rgba(245, 242, 235, 0.55);
  font-size: 0.82rem;
  line-height: 1.65;
  margin-bottom: 1.1rem;
  max-width: 320px;
}
.site-footer .footer-socials {
  display: flex;
  gap: 0.45rem;
}
.site-footer .footer-socials a {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(245, 242, 235, 0.1);
  background: rgba(245, 242, 235, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 242, 235, 0.7);
  transition: 0.15s;
}
.site-footer .footer-socials a:hover {
  color: #c8f53e;
  border-color: rgba(200, 245, 62, 0.3);
  background: rgba(200, 245, 62, 0.08);
}
.site-footer .footer-socials svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.site-footer .footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.site-footer .footer-col-title {
  color: #f5f2eb;
  font-weight: 600;
  font-size: 0.86rem;
  margin-bottom: 0.35rem;
}
.site-footer .footer-col a {
  color: rgba(245, 242, 235, 0.6);
  font-size: 0.82rem;
  text-decoration: none;
}
.site-footer .footer-col a:hover { color: #c8f53e; }
.site-footer .footer-bottom {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-top: 1.1rem;
  max-width: 1200px;
  margin: 0 auto;
}
.site-footer .footer-copy {
  color: rgba(245, 242, 235, 0.42);
  font-size: 0.75rem;
}
.site-footer .footer-legal {
  display: flex;
  gap: 1.1rem;
  margin-right: auto;
}
.site-footer .footer-legal a {
  color: rgba(245, 242, 235, 0.5);
  font-size: 0.75rem;
  text-decoration: none;
}
.site-footer .footer-legal a:hover { color: #c8f53e; }
.site-footer .footer-badges {
  display: flex;
  gap: 0.4rem;
}
.site-footer .footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 100px;
  background: rgba(245, 242, 235, 0.05);
  border: 1px solid rgba(245, 242, 235, 0.1);
  color: rgba(245, 242, 235, 0.72);
  font-size: 0.7rem;
  font-weight: 600;
}
.site-footer .footer-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c8f53e;
  box-shadow: 0 0 8px rgba(200, 245, 62, 0.55);
}

@media (max-width: 900px) {
  .site-footer { margin: 2rem 1rem 1rem; padding: 1.75rem 1.5rem 1rem; }
  .site-footer .footer-inner { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  .site-footer .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .site-footer .footer-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .site-footer .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .site-footer .footer-legal { margin-right: 0; }
}

/* ── De-box: calmer, less "everything in a rounded card" ───────────────
   Softer corners + lighter borders on class-based cards site-wide. Cards
   built with inline border-radius are toned down page-by-page separately. */
.card, .trust-card, .opt-card, .panel, .comp, .group-card,
.cat-form, article[data-product], article[data-bundle] {
  border-radius: 10px !important;
}
.card, .trust-card, .group-card { border-color: rgba(128,128,128,.16) !important; }

/* ── Header logo: icon only, hide the "SubSplit" text ──────────────────
   The nav .logo is plain text on every page; replace it with the brand icon
   (just the pill mark, no wordmark) for a cleaner, less crowded nav. Footer
   brand text is untouched. */
nav .logo {
  display: inline-block !important;
  width: 34px; height: 34px;
  background: url('/assets/subsplit-icon-transparent.svg') left center / contain no-repeat;
  text-indent: -9999px; overflow: hidden; white-space: nowrap;
  font-size: 0 !important;
}
@media (max-width: 480px) { nav .logo { width: 30px; height: 30px; font-size: 0 !important; } }

/* ── Sticky footer ─────────────────────────────────────────────────────
   Keep the footer pinned to the bottom of the viewport on short pages
   instead of floating up mid-screen. Body becomes a column; the footer's
   margin-top:auto absorbs the extra space. Fixed/absolute children (drawer,
   support widget, currency menu) are out of flow and unaffected. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > .site-footer { margin-top: auto; }