/* UI kit shared styles — SuperMarketers website */
:root{
  --sm-yellow:#DFFF05; --sm-yellow-deep:#C9E800; --sm-yellow-soft:#F0FFB0;
  --sm-purple:#6B4EFF; --sm-purple-deep:#4A33D9; --sm-purple-soft:#E8E1FF;
  --sm-cream:#F5EFE4; --sm-cream-deep:#EBE2D1;
  --sm-ink:#0A0A0A; --sm-graphite:#1A1A1A; --sm-slate:#4A4A4A; --sm-fog:#8A8A8A;
  --sm-mist:#C8C8C8; --sm-bone:#EDEDED; --sm-paper:#FAFAFA; --sm-white:#FFF;
  --font-display:"Archivo Black","Space Grotesk",sans-serif;
  --font-body:"Inter",sans-serif;
  --font-mono:"JetBrains Mono",monospace;
  --font-editorial:"Instrument Serif",serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--sm-ink);color:var(--sm-white);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- NAV ---------- */
.sm-nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;background:var(--sm-ink);border-bottom:2px solid var(--sm-yellow);color:var(--sm-white)}
.sm-nav.light{background:var(--sm-white);color:var(--sm-ink);border-bottom:2px solid var(--sm-ink)}
.sm-nav__logo{height:22px;display:block}
.sm-nav__links{display:flex;gap:32px;font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.sm-nav__links a{position:relative;padding:6px 0;color:var(--sm-white);opacity:1;transition:color .15s}
.sm-nav__links a:hover{color:var(--sm-yellow)}
.sm-nav__links a.active{color:var(--sm-yellow)}
.sm-nav__links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--sm-yellow)}
.sm-nav.light .sm-nav__links a{color:var(--sm-ink)}
.sm-nav.light .sm-nav__links a:hover{color:var(--sm-purple)}
.sm-nav.light .sm-nav__links a.active{color:var(--sm-ink)}
.sm-nav.light .sm-nav__links a.active::after{background:var(--sm-ink)}
.sm-nav__cta{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:12px 20px;border:2px solid var(--sm-ink);background:var(--sm-yellow);color:var(--sm-ink);border-radius:0;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:4px 4px 0 var(--sm-yellow)}
.sm-nav__cta:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--sm-yellow)}
.sm-nav.light .sm-nav__cta{box-shadow:4px 4px 0 var(--sm-ink)}
.sm-nav.light .sm-nav__cta:hover{box-shadow:2px 2px 0 var(--sm-ink)}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:900;font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:16px 24px;border:2.5px solid var(--sm-ink);background:var(--sm-yellow);color:var(--sm-ink);cursor:pointer;box-shadow:5px 5px 0 var(--sm-ink);transition:transform .15s cubic-bezier(0.22,1,0.36,1),box-shadow .15s cubic-bezier(0.22,1,0.36,1);border-radius:0}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--sm-ink)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--sm-ink)}
.btn--lg{font-size:16px;padding:20px 32px}
.btn--dark{background:var(--sm-ink);color:var(--sm-yellow);border-color:var(--sm-yellow);box-shadow:5px 5px 0 var(--sm-yellow)}
.btn--dark:hover{box-shadow:3px 3px 0 var(--sm-yellow)}
.btn--ghost{background:transparent;color:var(--sm-white);border-color:var(--sm-white);box-shadow:none}
.btn--ghost:hover{background:var(--sm-white);color:var(--sm-ink);transform:none}
.btn--purple{background:var(--sm-purple);color:var(--sm-white);border-color:var(--sm-ink)}

/* ---------- DISPLAY TYPE ---------- */
.d-hero{font-family:var(--font-display);font-size:clamp(48px,9vw,140px);line-height:.92;letter-spacing:-0.03em;text-transform:uppercase;font-weight:900;margin:0;text-wrap:balance}
.d-display{font-family:var(--font-display);font-size:clamp(40px,6.5vw,88px);line-height:.95;letter-spacing:-0.03em;text-transform:uppercase;font-weight:900;margin:0}
.d-h2{font-family:var(--font-display);font-size:clamp(32px,4vw,52px);line-height:.98;letter-spacing:-0.025em;text-transform:uppercase;font-weight:900;margin:0}
.d-h3{font-family:var(--font-display);font-size:clamp(22px,2vw,28px);line-height:1.1;letter-spacing:-0.015em;text-transform:uppercase;font-weight:900;margin:0}

.glow{color:var(--sm-yellow);filter:drop-shadow(0 0 14px rgba(223,255,5,0.5)) drop-shadow(0 0 38px rgba(223,255,5,0.22))}
.italic{font-family:var(--font-editorial);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-0.01em;color:var(--sm-cream)}

.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--sm-yellow);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:24px;height:1.5px;background:var(--sm-yellow)}
.eyebrow--dark{color:var(--sm-ink)}
.eyebrow--dark::before{background:var(--sm-ink)}
.eyebrow--slate{color:var(--sm-slate)}
.eyebrow--slate::before{background:var(--sm-slate)}

.lead{font-family:var(--font-body);font-size:clamp(17px,1.4vw,21px);line-height:1.5;color:var(--sm-mist);max-width:620px;text-wrap:pretty}
.lead--dark{color:var(--sm-slate)}

/* ---------- LAYOUT ---------- */
.container{max-width:1280px;margin:0 auto;padding:0 32px}
.section{padding:120px 0}
.section--tight{padding:80px 0}

.rule-top{border-top:2.5px solid var(--sm-ink)}
.rule-top-light{border-top:1px solid rgba(255,255,255,0.12)}

/* ---------- MARQUEE ---------- */
.marquee{background:var(--sm-yellow);color:var(--sm-ink);overflow:hidden;padding:22px 0;border-top:2.5px solid var(--sm-ink);border-bottom:2.5px solid var(--sm-ink)}
.marquee__track{display:flex;gap:40px;white-space:nowrap;animation:marq 28s linear infinite;font-family:var(--font-display);font-weight:900;font-size:clamp(28px,4vw,52px);letter-spacing:-0.02em;text-transform:uppercase}
.marquee__track > *{display:inline-flex;align-items:center;gap:40px;flex-shrink:0}
.marquee__dot{width:12px;height:12px;border-radius:50%;background:var(--sm-ink);display:inline-block}
.marquee em{font-family:var(--font-editorial);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-0.01em}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee--dark{background:var(--sm-ink);color:var(--sm-yellow);border-color:var(--sm-yellow)}
.marquee--dark .marquee__dot{background:var(--sm-yellow)}

/* ---------- CARDS ---------- */
.card{background:var(--sm-white);color:var(--sm-ink);border:2.5px solid var(--sm-ink);padding:28px;position:relative}
.card--punch{box-shadow:6px 6px 0 var(--sm-ink)}
.card--punch-y{box-shadow:6px 6px 0 var(--sm-yellow)}
.card--dark{background:var(--sm-graphite);color:var(--sm-white);border-color:var(--sm-yellow)}

/* ---------- FORM ---------- */
.field{width:100%;padding:14px 16px;border:1.5px solid var(--sm-ink);background:var(--sm-white);font-family:var(--font-body);font-size:15px;color:var(--sm-ink);border-radius:0;outline:none;transition:box-shadow .15s}
.field:focus{box-shadow:0 0 0 3px var(--sm-yellow);border-color:var(--sm-ink)}
.field--dark{background:transparent;border-color:rgba(255,255,255,0.3);color:var(--sm-white)}
.field--dark:focus{box-shadow:0 0 0 3px rgba(223,255,5,0.35)}
.label{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sm-slate);margin-bottom:8px;font-weight:500}
.label--dark{color:var(--sm-mist)}

/* ---------- PAGE THEMES ---------- */
.theme-dark{background:var(--sm-ink);color:var(--sm-white)}
.theme-light{background:var(--sm-white);color:var(--sm-ink)}
.theme-cream{background:var(--sm-cream);color:var(--sm-ink)}
.theme-yellow{background:var(--sm-yellow);color:var(--sm-ink)}

/* ---------- REVEAL ANIMATIONS ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(0.22,1,0.36,1),transform .7s cubic-bezier(0.22,1,0.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal-letter{display:inline-block;opacity:0;transform:translateY(0.4em);transition:opacity .55s cubic-bezier(0.22,1,0.36,1),transform .55s cubic-bezier(0.22,1,0.36,1)}
.reveal-letter.in{opacity:1;transform:none}

/* ---------- CURSOR ---------- */
.cursor{position:fixed;pointer-events:none;width:14px;height:14px;border-radius:50%;background:var(--sm-yellow);mix-blend-mode:difference;z-index:9999;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s}
.cursor.hover{width:56px;height:56px}

/* ---------- FOOTER ---------- */
.footer-mark{width:100%;height:auto;display:block;color:var(--sm-yellow)}
.footer-mark svg{width:100%;display:block}

.footer { background: var(--sm-ink); color: var(--sm-white); padding: 80px 32px 32px; }
.footer__inner { max-width: 1440px; margin: 0 auto; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 60px; }
.footer__grid h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sm-yellow); margin: 0 0 18px; font-weight: 500; }
.footer__grid a { color: var(--sm-mist); text-decoration: none; display: block; margin-bottom: 12px; font-size: 14px; transition: color 180ms; }
.footer__grid a:hover { color: var(--sm-yellow); }
.footer__lede { font-family: var(--font-display); font-size: 22px; font-weight: 900; text-transform: lowercase; letter-spacing: -0.02em; line-height: 1.2; max-width: 360px; margin: 0; }
.footer__wordmark { overflow: hidden; margin: 32px 0; }
.footer__wordmark img { width: 100%; display: block; }
.footer__meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.14); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sm-fog); }

.footer__signup { margin-top: 28px; max-width: 380px; }
.footer__signup-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sm-yellow); margin-bottom: 10px; }
.footer__signup form { display: flex; gap: 8px; }
.footer__signup input { flex: 1; min-width: 0; background: transparent; border: 1.5px solid rgba(255,255,255,0.25); color: var(--sm-white); padding: 12px 14px; font-family: var(--font-body); font-size: 14px; border-radius: 8px; transition: border-color 180ms; }
.footer__signup input::placeholder { color: var(--sm-fog); }
.footer__signup input:focus { outline: none; border-color: var(--sm-yellow); }
.footer__signup button { background: var(--sm-yellow); color: var(--sm-ink); border: 1.5px solid var(--sm-yellow); padding: 12px 18px; font-family: var(--font-body); font-weight: 700; font-size: 14px; border-radius: 8px; cursor: pointer; transition: transform 180ms, background 180ms; white-space: nowrap; }
.footer__signup button:hover:not(:disabled) { transform: translateY(-1px); background: var(--sm-white); }
.footer__signup button:disabled { opacity: 0.6; cursor: wait; }
.footer__signup-status { margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sm-fog); min-height: 14px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }

/* ---------- UTILITY ---------- */
.row{display:flex;gap:24px}
.col{display:flex;flex-direction:column}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}.gap-32{gap:32px}.gap-48{gap:48px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}.mt-64{margin-top:64px}
.flex-1{flex:1}
.center{text-align:center}