/* ===================================================================
   SlipStack brand system — green/paper (2026-06-15)
   Single source of truth for colour, type and shared components.
   Supersedes the 2026-06-08 blue (#1B4DFF) identity.
   Tokens mirror "SlipStack Brand.dc.html" from the design handoff.
   =================================================================== */
:root{
  /* Core */
  --ss-green:#1C6B47;        /* Primary — buttons, links, brand */
  --ss-green-deep:#0F3D2B;   /* Dark green surfaces / gradients */
  --ss-green-soft:#E8F3EC;   /* Tints — KPI tiles, icon chips */
  --ss-ink:#16241C;          /* Text, dark sections */
  --ss-paper:#F3ECDD;        /* Page background */
  --ss-paper-2:#E9E1CF;      /* Banded section background */
  --ss-paper-3:#EAE2D0;      /* Alt paper */
  /* Accent & support */
  --ss-terracotta:#C45B3C;   /* Accent — VAT, stamps, underline */
  --ss-terracotta-soft:#F7E9E2;
  --ss-mint:#7FD4A8;         /* Highlight on dark */
  --ss-navy:#16243F;         /* Data / dashboards */
  --ss-whatsapp:#25D366;     /* Channel cue only */
  /* Neutrals on paper */
  --ss-body:#475349;         /* Body copy */
  --ss-muted:#5a6960;        /* Secondary text */
  --ss-faint:#7a8178;        /* Captions */
  --ss-line:rgba(22,36,28,.08);
  --ss-line-2:rgba(22,36,28,.13);
  /* Layout */
  --ss-maxw:1200px;
  --ss-shadow:0 24px 50px -28px rgba(22,36,28,.4);
  --ss-shadow-green:0 12px 26px -10px rgba(28,107,71,.6);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--ss-ink);
     background:var(--ss-paper);line-height:1.55;-webkit-font-smoothing:antialiased;
     text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--ss-green);color:#fff}

/* Type */
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;color:var(--ss-ink);letter-spacing:-.02em;margin:0}
.ss-wordmark{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1}
.ss-wordmark b{font-weight:800;color:var(--ss-green)}
.ss-eyebrow{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ss-green)}

/* Logo lockup */
.ss-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--ss-green);
          border-radius:11px;box-shadow:0 6px 14px -6px rgba(28,107,71,.7);flex:none}

/* Buttons */
.ss-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;
        font-family:inherit;font-weight:600;border-radius:13px;cursor:pointer;border:1.5px solid transparent;
        transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.ss-btn:hover{transform:translateY(-2px)}
.ss-btn-primary{background:var(--ss-green);color:#fff;box-shadow:var(--ss-shadow-green)}
.ss-btn-secondary{background:#fff;color:var(--ss-ink);border-color:rgba(22,36,28,.18)}
.ss-btn-ink{background:var(--ss-ink);color:#fff}

/* Cards */
.ss-card{background:#fff;border:1px solid var(--ss-line);border-radius:22px}
.ss-card-rise{transition:transform .25s ease,box-shadow .25s ease}
.ss-card-rise:hover{transform:translateY(-4px);box-shadow:var(--ss-shadow)}

.ss-link{transition:opacity .18s ease}
.ss-link:hover{opacity:.6}

/* Layout helpers */
.ss-wrap{max-width:var(--ss-maxw);margin:0 auto;padding:0 32px}

@keyframes ssfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* FAQ */
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
details[open] .ss-faq-sign{transform:rotate(45deg)}