/*
* Sneeze It brand kit for customer-facing pages (homepages, sign-in, public pages).
* Source of truth: the Creative Benchmarks page David approved on 2026-09-24
* (claude.ai artifact QEM6T21PZzNfxv4gvWvX7s). Copy this file into a product unchanged;
* put product-specific rules in a separate small stylesheet after it.
*
* Load the fonts in :
*
*
*
*
* Light only by design: the brand is charcoal and magenta on white.
*/
:root{
color-scheme:light;
--paper:#FFFFFF; --wash:#F7F4F7; --ink:#232323; --soft:#67616B; --rule:#E7E2E8;
--mag:#EC2E91; --mag-deep:#8E0A52; --mag-wash:#FDEBF4; --mag-mid:#F59CC8; --bar:#D9D3DB;
--ok:#1F7A4D; --warn:#A86A00; --bad:#B3261E;
--display:"Figtree","Helvetica Neue",Arial,sans-serif;
--serif:"Newsreader",Georgia,"Times New Roman",serif;
--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--paper)}
body.sb{margin:0;background:var(--paper);color:var(--ink);font:19px/1.62 var(--serif);padding-inline:18px;-webkit-font-smoothing:antialiased}
.sb a{color:inherit}
.sb :focus-visible{outline:3px solid var(--mag);outline-offset:3px;border-radius:4px}
/* Top bar: real logo left, product name in the middle, one action right */
.sb-nav{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:18px}
.sb-nav img{height:30px;width:auto;display:block}
.sb-nav .mid{font:600 13px/1.2 var(--display);letter-spacing:.02em;color:var(--soft)}
.sb-nav .right{display:flex;gap:10px;align-items:center}
.sb-nav .signin{font:700 14px/1 var(--display);text-decoration:none;color:var(--ink)}
@media (max-width:680px){.sb-nav .mid{display:none}}
/* Buttons: magenta pill is the one filled button; ghost is the secondary */
.sb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--mag);color:#fff!important;font:800 15px/1 var(--display);text-decoration:none;padding:14px 20px;border-radius:999px;border:0;cursor:pointer;transition:transform .15s ease,background .15s ease,box-shadow .15s ease;box-shadow:0 6px 18px -8px rgba(236,46,145,.6)}
.sb-btn:hover{background:var(--mag-deep);transform:translateY(-1px)}
.sb-btn.ghost{background:transparent;color:var(--ink)!important;box-shadow:inset 0 0 0 2px var(--ink)}
.sb-btn.ghost:hover{background:var(--ink);color:#fff!important}
.sb-btn.sm{padding:11px 16px;font-size:14px}
/* Hero: rounded wash panel, ambient dot field canvas behind, centred */
.sb-hero{position:relative;max-width:1180px;margin:0 auto;border-radius:28px;overflow:hidden;background:var(--wash);padding:54px 22px 48px;text-align:center;display:grid;justify-items:center;gap:14px}
.sb-hero canvas.sb-field{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.sb-hero > *:not(canvas){position:relative;z-index:1}
.sb-eyebrow{font:700 12.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mag-deep)}
/* The wordmark headline: lowercase, product.name with a magenta dot: