/* ============================================================================
   Simplisave marketing site — standalone professional theme (Web project only).
   Reuses Bootstrap + Bootstrap Icons + the logo from Simplisave.UI, but all the
   marketing look-and-feel lives here so it stays independent of the app shell.
   ============================================================================ */
:root {
    --ss-primary: #16a34a;
    --ss-primary-2: #0e7a53;
    --ss-accent: #4ade80;
    --ss-ink: #0c1c14;
    --ss-body: #33433b;
    --ss-soft: #e7f6ee;
    --ss-line: #e6ece9;
    --ss-ring: 0 0 0 .22rem rgba(22,163,74,.18);
    --ss-ease: cubic-bezier(.4,0,.2,1);
    --ss-shadow: 0 1px 2px rgba(16,40,28,.05), 0 18px 40px -24px rgba(16,40,28,.30);
    --ss-shadow-lg: 0 30px 70px -30px rgba(7,40,24,.45);

    --bs-primary: #16a34a;
    --bs-primary-rgb: 22,163,74;
    --bs-link-color: #15803d;
    --bs-link-hover-color: #166534;
    --bs-body-color: #33433b;
    --bs-body-bg: #ffffff;
    --bs-border-radius: .8rem;
    --bs-font-sans-serif: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html { scroll-behavior: smooth; }
body { background: #fff; color: var(--ss-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    color: var(--ss-ink); font-weight: 800; letter-spacing: -.025em;
}
.text-primary { color: var(--ss-primary) !important; }
a { text-decoration: none; }
section { scroll-margin-top: 86px; }
.section { padding: clamp(2rem, 4.5vw, 3.5rem) 0; }
.eyebrow { display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ss-primary-2); background:var(--ss-soft); border:1px solid #cdeada; padding:.4rem .8rem; border-radius:999px; }
.lead { color: #51635a; }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: .7rem; padding: .6rem 1.15rem; transition: transform .12s var(--ss-ease), box-shadow .18s var(--ss-ease), filter .18s var(--ss-ease); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--ss-ring); }
.btn-lg { padding: .8rem 1.5rem; border-radius: .85rem; font-size: 1.02rem; }
.btn-primary { background: linear-gradient(100deg, var(--ss-primary), var(--ss-primary-2)); border: 0; box-shadow: 0 12px 24px -12px rgba(22,163,74,.8); }
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 18px 30px -12px rgba(22,163,74,.9); }
.btn-outline-primary { color: var(--ss-primary-2); border: 1.5px solid #bfe6cf; background: #fff; }
.btn-outline-primary:hover { background: var(--ss-soft); border-color: var(--ss-primary); color: var(--ss-primary-2); }
/* keep active / focus / dropdown-open states on-brand green (Bootstrap hardcodes blue here) */
.btn-outline-primary:active,
.btn-outline-primary:focus,
.btn-outline-primary.show,
.btn-check:checked + .btn-outline-primary {
    color: #fff !important; background: var(--ss-primary) !important; border-color: var(--ss-primary) !important; box-shadow: none !important;
}
.btn-outline-primary:focus-visible { box-shadow: var(--ss-ring) !important; }
.btn-light { border-radius: .85rem; font-weight: 700; }

/* ---------- Navbar ---------- */
.ss-nav {
    position: sticky; top: 0; z-index: 1030; padding: .5rem 0;
    background: rgba(255,255,255,.9);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--ss-line);
    transition: box-shadow .2s var(--ss-ease), border-color .2s var(--ss-ease);
}
.ss-nav.is-stuck { border-bottom-color: #e2ebe6; box-shadow: 0 14px 34px -24px rgba(16,40,28,.55); }
.ss-nav::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--ss-primary), var(--ss-accent), var(--ss-primary)); z-index:1; }
.ss-nav .navbar-brand { display:inline-flex; align-items:center; padding:.1rem 0; }
.ss-nav .navbar-brand img { display:block; }
.ss-nav .navbar-toggler { color: var(--ss-ink); border: 0; }
.ss-nav .navbar-nav { gap: .15rem; }
.ss-nav .nav-link { font-weight: 600; color: #46564d; padding: .5rem 1rem; border-radius: 10px; transition: color .15s var(--ss-ease), background .15s var(--ss-ease); }
.ss-nav .nav-link:hover { color: var(--ss-primary-2); background: var(--ss-soft); }
.ss-nav .nav-link.active { color: var(--ss-primary-2); background: var(--ss-soft); }
.ss-nav .btn-outline-primary { border-radius: 10px; font-weight: 700; }
.ss-nav .btn-primary { border-radius: 10px; font-weight: 700; }
/* segmented Store / Customer login control */
.ss-loginseg { display:flex; align-items:stretch; border:1.5px solid #cfe6da; border-radius:11px; overflow:hidden; background:#fff; box-shadow:0 6px 16px -10px rgba(16,40,28,.35); }
.ss-loginseg a { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.48rem .85rem; font-weight:700; font-size:.88rem; color:var(--ss-primary-2); white-space:nowrap; transition:background .15s var(--ss-ease), color .15s var(--ss-ease); }
.ss-loginseg a i { font-size:1rem; }
.ss-loginseg a + a { border-left:1.5px solid #e2efe8; }
.ss-loginseg a:hover { background:var(--ss-soft); color:var(--ss-primary); }
@media (max-width:991.98px){ .ss-navauth { width:100%; } .ss-loginseg a { flex:1 1 0; } .ss-navauth .btn-primary { width:100%; } }
.ss-signin-menu { border: 1px solid var(--ss-line); border-radius: 14px; padding: .4rem; box-shadow: 0 22px 50px -24px rgba(16,40,28,.5); min-width: 13rem; }
.ss-signin-menu .dropdown-item { border-radius: 9px; font-weight: 600; padding: .55rem .75rem; display: flex; align-items: center; }
.ss-signin-menu .dropdown-item i { color: var(--ss-primary); font-size: 1.05rem; }
.ss-signin-menu .dropdown-item:hover, .ss-signin-menu .dropdown-item:focus { background: var(--ss-soft); color: var(--ss-primary-2); }

/* ---------- Hero ---------- */
.ss-hero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(900px 480px at 85% -12%, rgba(34,197,94,.18), transparent 60%),
        radial-gradient(720px 420px at 0% 4%, rgba(14,122,83,.10), transparent 55%),
        linear-gradient(180deg, #e9f6ee 0%, #f1faf5 65%, #ecf8f1 100%);
    border-bottom: 1px solid #dcebe3;
}
/* faint dot-grid that fades out — adds a premium SaaS texture without noise */
.ss-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image: radial-gradient(rgba(16,40,28,.045) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 68%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 68%);
}
.ss-hero .section { padding-top: clamp(1.6rem, 3.4vw, 2.8rem); padding-bottom: clamp(1.9rem, 3.8vw, 3rem); }
.ss-hero h1 { font-size: clamp(2.1rem, 4.1vw, 3rem); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; }
.ss-hero .lead { font-size: 1.1rem; max-width: 35rem; color: #46564d; }
/* centred hero headings stay on a single line from tablet up — keeps them compact (Home's 2-col hero is unaffected) */
.ss-hero .text-center .lead { max-width: none; }   /* let the header description use the full width instead of the narrow 35rem cap */
@media (min-width: 768px){ .ss-hero .text-center h1 { white-space: nowrap; } }
@media (min-width: 992px){ .ss-hero .text-center .lead { white-space: nowrap; } }

/* ---------- Reusable premium page header (_PageHero) ---------- */
.ss-pagehero { isolation: isolate; }
.ss-pagehero .ss-pagehero-inner { position: relative; z-index: 1; max-width: 56rem; padding-block: .25rem 0; }
.ss-pagehero .eyebrow { box-shadow: 0 12px 26px -16px rgba(22,163,74,.65); }
.ss-pagehero h1 { margin-bottom: .55rem; }
.ss-pagehero .lead { color: #44574d; }
/* soft green glow halo behind the heading */
.ss-pagehero .ss-pagehero-inner::before {
    content: ""; position: absolute; z-index: -1; left: 50%; top: 54%; transform: translate(-50%,-50%);
    width: min(640px, 92%); height: 230px; pointer-events: none; border-radius: 50%;
    background: radial-gradient(60% 60% at 50% 50%, rgba(74,222,128,.20), transparent 72%);
    filter: blur(6px);
}
/* short gradient accent bar under the header */
.ss-pagehero .ss-pagehero-inner::after {
    content: ""; display: block; width: 66px; height: 4px; margin: 1.3rem auto 0; border-radius: 99px;
    background: linear-gradient(90deg, var(--ss-primary), var(--ss-accent));
    box-shadow: 0 8px 18px -8px rgba(22,163,74,.7);
}
@media (prefers-reduced-motion: reduce){ .ss-pagehero .ss-pagehero-inner::before { filter: none; } }
.ss-hero-card {
    border: 1px solid var(--ss-line); border-radius: 22px; background: #fff;
    box-shadow: var(--ss-shadow-lg); overflow: hidden;
}
.ss-hero-strip { background: linear-gradient(100deg, var(--ss-primary), var(--ss-primary-2)); height: 8px; }

/* badges row under hero */
.ss-trust { color:#71837a; font-weight:600; font-size:.85rem; }
.ss-trust i { color: var(--ss-primary); }

/* ---------- Feature / generic cards ---------- */
.ss-card { border: 1px solid var(--ss-line); border-radius: 18px; background: #fff; box-shadow: var(--ss-shadow); height: 100%; transition: transform .2s var(--ss-ease), box-shadow .2s var(--ss-ease), border-color .2s var(--ss-ease); }
.ss-card:hover { transform: translateY(-4px); box-shadow: var(--ss-shadow-lg); border-color: #d4ecdd; }
.card { border: 1px solid var(--ss-line); border-radius: 18px; box-shadow: var(--ss-shadow); }
.ss-ficon { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; font-size: 1.5rem; color: #fff; background: linear-gradient(135deg, var(--ss-primary), var(--ss-primary-2)); box-shadow: 0 12px 22px -10px rgba(22,163,74,.7); }
.ss-grad-emerald { background: linear-gradient(135deg,#34d399,#059669) !important; }
.ss-grad-blue { background: linear-gradient(135deg,#38bdf8,#2563eb) !important; }
.ss-grad-purple { background: linear-gradient(135deg,#a78bfa,#7c3aed) !important; }
.ss-grad-orange { background: linear-gradient(135deg,#fbbf24,#f59e0b) !important; }
.ss-grad-teal { background: linear-gradient(135deg,#2dd4bf,#0d9488) !important; }

/* ---------- Pricing ---------- */
.ss-price { border: 1px solid var(--ss-line); border-radius: 20px; background:#fff; box-shadow: var(--ss-shadow); height:100%; transition: transform .2s var(--ss-ease), box-shadow .2s var(--ss-ease); }
.ss-price:hover { transform: translateY(-4px); box-shadow: var(--ss-shadow-lg); }
.ss-price.is-featured { border: 1.5px solid var(--ss-primary); box-shadow: 0 30px 60px -28px rgba(22,163,74,.55); }
.ss-price .ss-amount { font-size: 2.6rem; font-weight: 800; color: var(--ss-ink); letter-spacing:-.03em; }
.ss-price ul { list-style: none; padding: 0; margin: 0; }
.ss-price li { padding: .38rem 0; color:#4b5b52; display:flex; gap:.55rem; align-items:center; }
.ss-price li i { color: var(--ss-primary); font-size:1.05rem; }
.ss-price-tier { background:#eef7f1; color:#0e7a53; font-weight:700; font-size:.74rem; padding:.3rem .7rem; border-radius:999px; white-space:nowrap; align-self:flex-start; }
.ss-price.is-pop { border:1.5px solid var(--ss-primary); box-shadow:0 30px 60px -28px rgba(22,163,74,.45); }
.ss-badge-pop { background: var(--ss-primary); color:#fff; font-weight:700; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; padding:.3rem .7rem; border-radius:999px; }

/* ---------- CTA band ---------- */
.ss-cta { border-radius: 26px; color:#fff; padding: clamp(2rem,5vw,3.5rem); position:relative; overflow:hidden;
    background: linear-gradient(120deg, #0c3b29 0%, #12824e 55%, #1fb060 100%); box-shadow: var(--ss-shadow-lg); }
.ss-cta::after { content:""; position:absolute; right:-70px; top:-70px; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,.08); }
.ss-cta h2 { color:#fff; }

/* ---------- Footer (modern) ---------- */
.ss-footer { position:relative; background: linear-gradient(180deg,#0e271b,#07140e); color:#9fb2a7; padding: 3.25rem 0 1.75rem; }
.ss-footer::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--ss-primary), var(--ss-accent), var(--ss-primary)); }
.ss-footer .ss-fbrand { display:inline-flex; align-items:center; background:#fff; border-radius:11px; padding:.35rem .65rem; }
.ss-footer .ss-ftag { max-width:24rem; line-height:1.65; }
.ss-footer a { color:#9fb2a7; transition: color .15s var(--ss-ease), transform .15s var(--ss-ease); }
.ss-footer a:hover { color:#fff; }
.ss-footer h6 { color:#fff; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.76rem; margin-bottom:1rem; }
.ss-footer .ss-fcol a { display:block; width:fit-content; padding:.32rem 0; position:relative; }
.ss-footer .ss-fcol a::after { content:""; position:absolute; left:0; bottom:.08rem; height:2px; width:0; border-radius:2px; background:linear-gradient(90deg, var(--ss-primary), var(--ss-accent)); transition:width .22s var(--ss-ease); }
.ss-footer .ss-fcol a:hover { color:#fff; }
.ss-footer .ss-fcol a:hover::after { width:100%; }
.ss-footer hr { border-color: rgba(255,255,255,.08); }
.ss-fsocial { display:flex; gap:.55rem; }
.ss-fsocial a { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:1.05rem; color:#cfe3d8; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); transition: all .15s var(--ss-ease); }
.ss-fsocial a:hover { color:#0c2c1d; background:var(--ss-accent); border-color:var(--ss-accent); transform:translateY(-2px); }
.ss-fright { display: flex; flex-direction: column; }
/* highlighted Store / Customer login buttons (above the social row) */
.ss-flogin { display: flex; flex-wrap: wrap; gap: .5rem; }
.ss-floginbtn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 10px; font-weight: 700; font-size: .85rem; color: #eafff4 !important; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.05); transition: all .15s var(--ss-ease); }
.ss-floginbtn i { color: var(--ss-accent); font-size: 1rem; }
.ss-floginbtn:hover { color: #0c2c1d !important; background: var(--ss-accent); border-color: var(--ss-accent); transform: translateY(-2px); box-shadow: 0 12px 22px -12px rgba(74,222,128,.8); }
.ss-floginbtn:hover i { color: #0c2c1d; }
/* copyright — centred bottom bar below everything */
.ss-fcopy { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.08); color: #7c9488; }

/* ---------- Forms ---------- */
.form-control { border-color:#dde6e1; border-radius:.7rem; padding:.6rem .9rem; }
.form-control:focus { border-color:#86d3a5; box-shadow: var(--ss-ring); }
.form-label { font-weight:600; color:#3f4f47; }

/* page-load bar (shared _PageProgress markup) */
.ss-pageload { position:fixed; top:0; left:0; right:0; height:3px; z-index:2000; background:rgba(22,163,74,.12); overflow:hidden; transition:opacity .4s ease; pointer-events:none; }
.ss-pageload::after { content:""; position:absolute; top:0; left:-35%; height:100%; width:35%; background:linear-gradient(90deg,transparent,var(--ss-primary),var(--ss-accent),transparent); animation:ssBar 1s ease-in-out infinite; }
.ss-pageload.done { opacity:0; }
@keyframes ssBar { 0%{left:-35%} 60%,100%{left:100%} }
@keyframes ssFadeIn { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
.ss-fade-in { animation: ssFadeIn .4s var(--ss-ease) both; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .ss-fade-in,.ss-pageload::after{animation:none!important} }

/* ============================================================================
   ADVANCED look & feel — gradient text, animated hero orbs, glass, reveal,
   stat band, how-it-works steps, premium buttons, refined pricing.
   ============================================================================ */
.ss-gradient-text {
    background: linear-gradient(100deg, #16a34a 0%, #0e7a53 40%, #22c55e 75%, #4ade80 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* animated dotted backdrop for sections */
.ss-dots { background-image: radial-gradient(rgba(16,120,72,.10) 1px, transparent 1.4px); background-size: 22px 22px; }

/* hero: floating gradient orbs + grid sheen */
.ss-hero { isolation: isolate; }
.ss-hero .ss-orb { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .32; z-index: -1; animation: ssFloat 18s ease-in-out infinite; }
.ss-hero .ss-orb-1 { width: 320px; height: 320px; right: 3%; top: -10%; background: radial-gradient(circle at 30% 30%, #4ade80, #16a34a); }
.ss-hero .ss-orb-2 { width: 240px; height: 240px; left: -5%; bottom: -12%; background: radial-gradient(circle at 50% 50%, #34d399, #0e7a53); animation-delay: -6s; }
.ss-hero .ss-orb-3 { width: 160px; height: 160px; left: 44%; top: 14%; background: radial-gradient(circle at 50% 50%, #a7f3d0, #22c55e); opacity: .22; animation-delay: -10s; }
@keyframes ssFloat { 0%,100% { transform: translateY(0) translateX(0) scale(1); } 33% { transform: translateY(-26px) translateX(14px) scale(1.05); } 66% { transform: translateY(16px) translateX(-12px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .ss-hero .ss-orb { animation: none; } }

/* hero card gets a soft floating animation + glow */
.ss-hero-card { animation: ssFloat 9s ease-in-out infinite; }
.ss-hero-card:hover { animation-play-state: paused; }
/* real rendered virtual card in the hero */
.ss-hero-cardwrap { position: relative; max-width: 30rem; }
.ss-hero-cardimg { width: 100%; height: auto; display: block; filter: drop-shadow(0 28px 46px rgba(16,40,28,.42)); animation: ssFloat 9s ease-in-out infinite; }
.ss-hero-cardwrap:hover .ss-hero-cardimg { animation-play-state: paused; }
.ss-hero-cardbadge { position: absolute; left: 50%; bottom: -.9rem; transform: translateX(-50%); white-space: nowrap;
    background: #fff; color: var(--ss-primary-2); font-weight: 700; font-size: .8rem; padding: .4rem .9rem; border-radius: 999px;
    border: 1px solid var(--ss-line); box-shadow: 0 12px 26px -14px rgba(16,40,28,.5); }

/* glass panel */
.ss-glass { background: rgba(255,255,255,.6); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255,255,255,.7); border-radius: 18px; box-shadow: var(--ss-shadow); }

/* scroll reveal */
.ss-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ss-ease), transform .6s var(--ss-ease); }
.ss-reveal.is-in { opacity: 1; transform: none; }
.ss-reveal.d1 { transition-delay: .08s; } .ss-reveal.d2 { transition-delay: .16s; } .ss-reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .ss-reveal { opacity: 1; transform: none; transition: none; } }

/* premium button sheen */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transition: left .6s var(--ss-ease); }
.btn-primary:hover::after { left: 130%; }

/* stat band */
.ss-statband { border: 1px solid var(--ss-line); border-radius: 22px; background: linear-gradient(180deg,#fff,#f6fbf8); box-shadow: var(--ss-shadow); }
.ss-statband .ss-stat-num { font-size: clamp(1.8rem,4vw,2.6rem); font-weight: 800; letter-spacing: -.03em; }
.ss-statband .ss-stat-cap { color: #6b7a72; font-weight: 600; font-size: .9rem; }
.ss-statband .col + .col { border-left: 1px solid var(--ss-line); }
@media (max-width: 767.98px){ .ss-statband .col + .col { border-left: 0; border-top: 1px solid var(--ss-line); } }

/* feature card icon gets a subtle ring + hover pop already on .ss-card */
.ss-card .ss-ficon { transition: transform .2s var(--ss-ease); }
.ss-card:hover .ss-ficon { transform: translateY(-2px) rotate(-4deg) scale(1.06); }

/* how-it-works steps */
.ss-step { position: relative; padding-left: 0; }
.ss-step .ss-step-num { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--ss-primary), var(--ss-primary-2)); box-shadow: 0 12px 22px -10px rgba(22,163,74,.7); }

/* pricing refinements */
.ss-price { display: flex; flex-direction: column; padding: 1.75rem; }
.ss-price.is-featured { transform: scale(1.04); position: relative; z-index: 2; }
.ss-price.is-featured::before { content: "Most popular"; position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%); background: var(--ss-primary); color:#fff; font-weight:700; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; padding:.35rem .85rem; border-radius:999px; box-shadow: 0 10px 20px -8px rgba(22,163,74,.8); }
.ss-price .ss-plan-name { font-weight: 800; color: var(--ss-ink); }
.ss-price li.off { color:#aebbb3; }
.ss-price li.off i { color:#cdd8d2; }
@media (max-width: 991.98px){ .ss-price.is-featured { transform: none; } }

/* section heading helper */
.ss-h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }

/* ============================================================================
   LOYALTY look & feel — reward chips, points pill, earn mechanics, membership
   tiers and a live points-activity feed. Makes the site read as a rewards
   product rather than a generic SaaS.
   ============================================================================ */
:root { --ss-gold: #f5b81c; --ss-gold-2: #d4920a; }

/* floating reward chips around the hero card */
.ss-rchip {
    position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
    background: #fff; border: 1px solid var(--ss-line); border-radius: 999px; padding: .5rem .9rem;
    font-weight: 700; font-size: .85rem; color: var(--ss-ink);
    box-shadow: 0 16px 34px -16px rgba(16,40,28,.55);
    animation: ssFloat 7s ease-in-out infinite;
}
.ss-rchip i { font-size: 1rem; }
.ss-rchip-pts { color: #15803d; } .ss-rchip-pts i { color: var(--ss-primary); }
.ss-rchip-gold i { color: var(--ss-gold-2); }
.ss-rchip-gift i { color: #db2777; }
.ss-rchip-1 { top: -1.1rem; left: -.9rem; animation-delay: -1s; }
.ss-rchip-2 { top: 26%; right: -1.4rem; animation-delay: -3.5s; }
.ss-rchip-3 { bottom: 22%; left: -1.7rem; animation-delay: -5s; }
@media (max-width: 575.98px){ .ss-rchip-1{left:.1rem} .ss-rchip-2{right:.1rem} .ss-rchip-3{left:.1rem} .ss-rchip{font-size:.78rem;padding:.4rem .7rem} }
@media (prefers-reduced-motion: reduce){ .ss-rchip{ animation: none; } }

/* points balance pill (hero) */
.ss-pointspill { display: inline-flex; align-items: center; gap: .55rem; background: #0c2c1d; color: #d7ecdf; border-radius: 999px; padding: .42rem .65rem .42rem 1rem; font-weight: 600; box-shadow: 0 16px 30px -16px rgba(7,40,24,.7); }
.ss-pointspill b { font-size: 1.08rem; color: var(--ss-accent); font-variant-numeric: tabular-nums; }
.ss-pointspill .ss-pp-coin { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #5a3d00; background: linear-gradient(135deg, var(--ss-gold), var(--ss-gold-2)); box-shadow: 0 6px 14px -6px rgba(212,146,10,.9); }

/* ways to earn / redeem chips */
.ss-earnchip { display: flex; align-items: center; gap: .85rem; padding: .9rem 1.05rem; background: #fff; border: 1px solid var(--ss-line); border-radius: 15px; box-shadow: var(--ss-shadow); height: 100%; transition: transform .2s var(--ss-ease), box-shadow .2s var(--ss-ease), border-color .2s var(--ss-ease); }
.ss-earnchip:hover { transform: translateY(-3px); box-shadow: var(--ss-shadow-lg); border-color: #d4ecdd; }
.ss-earnchip .ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-size: 1.15rem; background: linear-gradient(135deg, var(--ss-primary), var(--ss-primary-2)); box-shadow: 0 10px 20px -10px rgba(22,163,74,.7); }
.ss-earnchip .lbl { font-weight: 700; color: var(--ss-ink); line-height: 1.15; }
.ss-earnchip .val { font-size: .82rem; color: #6b7a72; font-weight: 600; }

/* membership tiers — capability medals (no fabricated thresholds) */
.ss-tierbadge { text-align: center; }
.ss-tierbadge .medal { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; font-size: 1.85rem; color: #fff; box-shadow: 0 16px 30px -12px rgba(16,40,28,.45); margin: 0 auto .6rem; transition: transform .2s var(--ss-ease); }
.ss-tierbadge:hover .medal { transform: translateY(-4px) scale(1.05); }
.ss-tierbadge .nm { font-weight: 700; color: var(--ss-ink); }
.ss-medal-bronze { background: linear-gradient(135deg,#e0a06a,#a9692f); }
.ss-medal-silver { background: linear-gradient(135deg,#d6dee2,#90a0a6); color: #3a4a4f !important; }
.ss-medal-gold { background: linear-gradient(135deg,#f7d774,#d4920a); color: #5a3d00 !important; }

/* live points-activity feed */
.ss-feed { border: 1px solid var(--ss-line); border-radius: 20px; background: #fff; box-shadow: var(--ss-shadow-lg); overflow: hidden; }
.ss-feed-head { display: flex; align-items: center; gap: .55rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--ss-line); font-weight: 700; color: var(--ss-ink); }
.ss-feed-head .ss-feed-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ss-accent); box-shadow: 0 0 0 4px rgba(74,222,128,.25); animation: ssPulse 1.6s infinite; }
.ss-feed-head .live { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-primary-2); margin-left: auto; }
@keyframes ssPulse { 50% { opacity: .35; } }
.ss-feed-row { display: flex; align-items: center; gap: .85rem; padding: .85rem 1.25rem; border-top: 1px solid #f0f5f2; }
.ss-feed-row:first-of-type { border-top: 0; }
.ss-feed-av { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: .9rem; }
.ss-feed-main { flex: 1 1 auto; min-width: 0; }
.ss-feed-name { font-weight: 700; color: var(--ss-ink); }
.ss-feed-sub { font-size: .82rem; color: #6b7a72; }
.ss-feed-amt { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ss-feed-amt.plus { color: #15803d; } .ss-feed-amt.redeem { color: #b45309; }
.ss-feed-amt.tier { color: var(--ss-gold-2); }
@media (prefers-reduced-motion: reduce){ .ss-feed-head .ss-feed-dot{ animation: none; } }

/* ============================================================================
   Mobile responsiveness — keep the decorative/loyalty pieces tidy on phones and
   stop the hero's floating elements from ever causing horizontal scroll.
   ============================================================================ */
html, body { overflow-x: clip; max-width: 100%; }   /* sticky-safe guard (clip, not hidden, keeps the sticky nav working) */
img, svg { max-width: 100%; }
/* large-gutter rows must never push past the container on small screens */
@media (max-width: 575.98px){
    .row.g-5 { --bs-gutter-x: 1.5rem; }
    .container { padding-left: 1.25rem; padding-right: 1.25rem; }   /* comfortable side gutters on phones */
}

@media (max-width: 991.98px){
    /* expanded mobile menu becomes a clean white card instead of a translucent strip */
    .ss-nav .navbar-collapse { background:#fff; border:1px solid var(--ss-line); border-radius:14px; padding:.7rem .85rem; margin-top:.55rem; box-shadow:var(--ss-shadow); }
    .ss-nav .navbar-nav { gap:.1rem; }
    .ss-nav .navbar-nav .nav-link { padding:.6rem .9rem; }
    .ss-rchip-1 { left:-.3rem; } .ss-rchip-2 { right:-.5rem; } .ss-rchip-3 { left:-.5rem; }
}
@media (max-width: 575.98px){
    .ss-rchip { font-size:.74rem; padding:.35rem .6rem; }
    .ss-rchip-1 { top:-.6rem; left:.2rem; } .ss-rchip-2 { top:16%; right:.2rem; } .ss-rchip-3 { bottom:14%; left:.2rem; }
    .ss-pointspill { font-size:.9rem; padding:.4rem .55rem .4rem .85rem; }
    .ss-feed-head { padding:.85rem 1rem; } .ss-feed-row { padding:.7rem 1rem; gap:.65rem; }
    .ss-feed-sub { font-size:.76rem; } .ss-feed-av { width:34px; height:34px; font-size:.8rem; }
    .ss-tierbadge .medal { width:60px; height:60px; font-size:1.5rem; }
    .ss-amount { font-size:2.2rem; }
}

/* ============================================================================
   ssToast notifications (shared with the portals; styling extracted so the
   marketing site can show toasts without loading the full site.css).
   ============================================================================ */
#ss-toasts {
    position: fixed; top: 1rem; right: 1rem; z-index: 4000;
    display: flex; flex-direction: column; gap: .7rem;
    width: min(380px, calc(100vw - 2rem)); pointer-events: none;
}
.ss-toast2 {
    pointer-events: auto; position: relative; display: flex; align-items: flex-start; gap: .75rem;
    padding: .9rem 1rem; border-radius: 15px; overflow: hidden;
    background: rgba(255,255,255,.95); backdrop-filter: saturate(180%) blur(8px);
    border: 1px solid rgba(16,40,28,.06);
    box-shadow: 0 18px 40px -12px rgba(16,40,28,.28);
    transform: translateX(120%); opacity: 0; transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .35s;
}
.ss-toast2.show { transform: none; opacity: 1; }
.ss-toast2.hide { transform: translateX(120%); opacity: 0; transition: transform .28s ease-in, opacity .28s; }
.ss-toast2-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 1.15rem; box-shadow: 0 8px 18px -6px rgba(0,0,0,.4); }
.ss-toast2-body { flex: 1 1 auto; min-width: 0; padding-top: .12rem; }
.ss-toast2-title { font-weight: 700; color: var(--ss-ink, #102a1c); font-size: .93rem; line-height: 1.3; word-break: break-word; }
.ss-toast2-text { color: #6b7a72; font-size: .82rem; margin-top: .12rem; word-break: break-word; }
.ss-toast2-close { flex: 0 0 auto; border: 0; background: transparent; color: #aab4ad; font-size: 1.1rem; line-height: 1; padding: .1rem .2rem; border-radius: 7px; cursor: pointer; transition: background .15s, color .15s; }
.ss-toast2-close:hover { background: #eef2f0; color: #4a5b52; }
.ss-toast2-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; transform: scaleX(1); }
.ss-toast2-success .ss-toast2-icon { background: linear-gradient(135deg, #22c55e, #15803d); }
.ss-toast2-error   .ss-toast2-icon { background: linear-gradient(135deg, #fb7185, #dc2626); }
.ss-toast2-warning .ss-toast2-icon { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.ss-toast2-info    .ss-toast2-icon { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.ss-toast2-success .ss-toast2-bar { background: linear-gradient(90deg, #16a34a, #4ade80); }
.ss-toast2-error   .ss-toast2-bar { background: linear-gradient(90deg, #dc2626, #fb7185); }
.ss-toast2-warning .ss-toast2-bar { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.ss-toast2-info    .ss-toast2-bar { background: linear-gradient(90deg, #2563eb, #60a5fa); }
@media (prefers-reduced-motion: reduce) { .ss-toast2, .ss-toast2.hide { transition: opacity .2s; transform: none; } }