/* ===================================================================
SlipStack brand system v4 — "Ledger" · The Drop (2026-09-15)
Navy ink · white · two accents with separate jobs: amber is the
identity, cobalt is action. Trust-first.
Single source of truth for colour, type and shared components.
Supersedes v3 (2026-08-11, one cobalt accent, three-bar mark,
single-colour wordmark), the 2026-06-15 green/paper identity and
the 2026-06-08 blue identity before it. Decision: Ross, 2026-09-15.
The legacy *-green / *-terracotta / *-mint token names were renamed
to their semantic equivalents on 2026-08-13; only semantic names
(--ss-accent, --ss-navy, --ss-accent-soft, --ss-highlight) exist now.
Responsive system — canonical breakpoints (use ONLY these):
960px two-column layouts collapse to one
880px nav links collapse into the mobile menu
760px grids/tables collapse, section rhythm tightens
480px phone fine-tuning
Gutters, section padding and display type are fluid (clamp) and
need no media queries; page CSS should consume --ss-sec-pad,
--ss-gap, .ss-h1 and .ss-h2 instead of hard-coded values.
=================================================================== */
:root{
/* Core */
--ss-ink:#0B1B2E; /* Headings, dark sections, favicon tile — deep navy-ink */
--ss-paper:#FFFFFF; /* Page background */
--ss-paper-2:#F5F7FA; /* Banded section background — cool neutral */
--ss-paper-3:#EEF1F5; /* Inset tiles on white */
--ss-accent:#1A56DB; /* The ACTION accent — primary CTAs, links, key figures, the mark's drop arrow */
--ss-accent-deep:#1747BC; /* Accent hover / pressed */
--ss-accent-soft:#EEF3FD; /* Tints, icon chips */
--ss-navy:#13294B; /* Dark surfaces — dashboard band, footer */
/* Identity — amber. The mark's slab, tagline and app-icon tile. Since the
2026-09-26 trust pass it no longer colours the wordmark or website icons.
Never a CTA, never a page background, never near status (badges, flags,
row-level icons on live records) — amber there reads as "needs attention". */
--ss-brand:#D97706; /* Lower mark bar, "Stack" in the wordmark, app-icon tile, filled icon payloads */
--ss-brand-deep:#B45309; /* Hover / pressed on brand surfaces; tagline and any brand text below ~14px (mid-amber is 3.2:1 on white) */
--ss-brand-on-dark:#F9BE6A;/* Wordmark and tagline on navy/ink; every stroke and thin detail on ink icon bodies */
--ss-brand-tint:#FDF1DF; /* Icon-tile grounds, light brand fills */
/* Text */
--ss-body:#3E4C59; /* Body copy */
--ss-muted:#64748B; /* Secondary text */
--ss-faint:#66738A; /* Captions, tertiary — AA (4.8:1) on white */
/* Channel */
--ss-whatsapp:#25D366; /* WhatsApp affordances ONLY — never brand */
/* Ledger rules (hairlines are structure, not decoration) */
--ss-line:rgba(11,27,46,.10);
--ss-line-2:rgba(11,27,46,.16);
/* Layout */
--ss-maxw:1200px;
--ss-sec-pad:clamp(52px,9vw,84px); /* vertical rhythm of a section */
--ss-gap:clamp(24px,5vw,48px); /* gap between collapsed columns */
--ss-shadow:0 1px 2px rgba(11,27,46,.05),0 16px 40px -24px rgba(11,27,46,.25);
--ss-r-card:8px;
--ss-r-btn:6px;
--ss-highlight:#8FB6FF; /* highlight on dark surfaces; the drop arrow on dark */
--ss-shadow-accent:0 10px 24px -14px rgba(26,86,219,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',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-accent);color:#fff}
:focus-visible{outline:2px solid var(--ss-accent);outline-offset:2px}
/* Type */
h1,h2,h3{font-family:'Schibsted Grotesk',sans-serif;color:var(--ss-ink);letter-spacing:-.02em;margin:0}
.ss-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.ss-eyebrow{font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:12.5px;
letter-spacing:.08em;text-transform:uppercase;color:var(--ss-accent-deep)}
.ss-mono{font-family:'IBM Plex Mono',monospace}
.ss-h1{font-size:clamp(31px,3.2vw + 20px,64px);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.ss-h2{font-size:clamp(26px,2vw + 18px,44px);line-height:1.1;letter-spacing:-.025em;text-wrap:balance}
/* Wordmark — the markup stays split at the same point:
SlipStack
but since the 2026-09-26 trust pass both halves render in one colour
(ink; white on dark). Amber lives in the mark's slab only — an orange
word beside cobalt buttons read as two brands competing. The is
kept so a future two-tone decision is a one-line change here.
Sizes are set per use; tracking tightens at display size. */
.ss-wordmark{font-family:'Schibsted Grotesk',sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ss-ink)}
.ss-wordmark b,.ss-wordmark span{font-weight:inherit;color:inherit}
.ss-wordmark-display{letter-spacing:-.04em} /* 38–40px */
.ss-on-dark .ss-wordmark{color:#fff}
.ss-on-dark .ss-wordmark b,.ss-on-dark .ss-wordmark span{color:inherit}
/* Tagline — the copy stays "Snap the slip. We'll do the rest." in the source;
uppercase is presentational only. */
.ss-tagline{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:10px;letter-spacing:.16em;
text-transform:uppercase;color:var(--ss-brand-deep)}
.ss-on-dark .ss-tagline{color:var(--ss-brand-on-dark)}
/* Endorsement — "by Qelo" */
.ss-endorse{font-family:'Inter',system-ui,sans-serif;font-weight:400;font-size:11px;letter-spacing:.06em;color:var(--ss-muted)}
.ss-on-dark .ss-endorse{color:var(--ss-highlight)}
/* Logo tile (ink) and the icon-tile ground for the product icon set */
.ss-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--ss-ink);
border-radius:8px;flex:none}
.ss-icon-tile{display:inline-flex;align-items:center;justify-content:center;background:var(--ss-brand-tint);
border-radius:10px}
/* Buttons — cobalt keeps every job it had */
.ss-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;
font-family:inherit;font-weight:600;border-radius:var(--ss-r-btn);cursor:pointer;
border:1px solid transparent;transition:background .15s ease,border-color .15s ease,color .15s ease}
.ss-btn-primary{background:var(--ss-accent);color:#fff}
.ss-btn-primary:hover{background:var(--ss-accent-deep)}
.ss-btn-secondary{background:#fff;color:var(--ss-ink);border-color:var(--ss-line-2)}
.ss-btn-secondary:hover{border-color:var(--ss-ink)}
.ss-btn-ink{background:var(--ss-ink);color:#fff}
.ss-btn-ink:hover{background:var(--ss-navy)}
/* Cards — quiet: hairline first, shadow barely */
.ss-card{background:#fff;border:1px solid var(--ss-line);border-radius:var(--ss-r-card);
box-shadow:0 1px 2px rgba(11,27,46,.04)}
.ss-card-rise{transition:border-color .2s ease,box-shadow .2s ease}
.ss-card-rise:hover{border-color:var(--ss-line-2);box-shadow:var(--ss-shadow)}
.ss-link{transition:opacity .15s ease}
.ss-link:hover{opacity:.65}
/* Ledger rule — the structural divider of the identity */
.ss-rule{border:0;border-top:1px solid var(--ss-line);margin:0}
/* Double rule — reserved for totals, the way a closed-off column is ruled */
.ss-rule-total{border:0;border-top:4px double var(--ss-ink);margin:0}
/* Layout helpers */
.ss-wrap{max-width:var(--ss-maxw);margin:0 auto;padding:0 clamp(18px,4.5vw,32px)}
/* Mobile menu — shared