/* ══ KWICKDO — "Gallery" theme ══
   Warm paper, ink black, one vermilion accent. Squared geometry,
   hairline rules, serif display. Loaded after app.css and overrides it.
   The logo keeps its pink gradient: the one bright mark on the page. */
:root{
  --bg:#FBFAF7; --bg-alt:#F4F1EA; --bg-deep:#EDE8DE;
  --surface:#FFFDF9; --surface-2:#F4F1EA; --surface-3:#E7E1D5;
  --text:#14110F; --ink:#14110F;
  --mist:#6E655C; --mist-light:#3A342F; --faint:#786E60;
  --line:#E6E0D5; --line-2:#D3CABA;
  --brand:#B7410E; --brand-600:#98350B; --brand-400:#CB5A26; --brand-200:#98350B;
  --brand-tint:#FBF1EA; --brand-tint-2:#F3DCCB;
  --coral:#A3341F; --coral-tint:#FAEDE9;
  --teal:#2F6B5E;  --teal-tint:#EAF2EF;
  --amber:#7E6013; --amber-tint:#F8F1DF;
  --shadow-sm:0 1px 2px rgba(20,17,15,.04);
  --shadow:0 6px 20px -8px rgba(20,17,15,.14);
  --shadow-lg:0 18px 40px -16px rgba(20,17,15,.22);
  --r:4px; --serif:'Fraunces',Georgia,'Times New Roman',serif;
}
body{background:var(--bg);background-image:none;line-height:1.55}
#hdr{background:rgba(251,250,247,.86)}
#hdr.scrolled{background:rgba(251,250,247,.97);box-shadow:none}
.hero-glow{display:none}
.grid-bg{background-image:linear-gradient(rgba(20,17,15,.028) 1px,transparent 1px),
  linear-gradient(90deg,rgba(20,17,15,.028) 1px,transparent 1px);background-size:64px 64px}
.h1,.h2,.h3,.stat-v,.faq-q,.avatar{font-family:var(--serif);font-variation-settings:'SOFT' 0,'WONK' 0}
.h1,.h2,.h3,.stat-v{font-weight:600;letter-spacing:-.02em}
.h1{line-height:1.02}
@media(min-width:1024px){.h1{font-size:5rem}.h2{font-size:3rem}}
.gradient-text{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--brand)}
.eyebrow{font-weight:600;letter-spacing:.2em;color:var(--brand)}
.stat-v{font-size:2rem}
.stat-k{letter-spacing:.15em}
.tbl th{letter-spacing:.14em;border-bottom:1px solid var(--line-2)}
label{text-transform:uppercase;letter-spacing:.11em;font-size:11px;color:var(--mist)}
label .muted{text-transform:none;letter-spacing:0}
.card,.tbl-wrap,.stat-strip,.btn,.pill,.tag,.st,.cd-cell,.checkline,.flash,.blind-note,.ok-note,
input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],
input[type=tel],input[type=date],input[type=datetime-local],select,textarea{border-radius:var(--r)}
.card{box-shadow:none}
.card-hover:hover{border-color:var(--ink);transform:none;box-shadow:var(--shadow)}
.btn{border:1px solid transparent;letter-spacing:.005em}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--ink);color:var(--bg);border-color:var(--ink);box-shadow:none}
.btn-p:hover{background:var(--brand);border-color:var(--brand);box-shadow:none}
.btn-o{border-color:var(--line-2);background:transparent;color:var(--text)}
.btn-o:hover{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.btn-danger{background:transparent;color:var(--coral);border-color:#E3C2B8}
.btn-danger:hover{background:var(--coral);border-color:var(--coral);color:#fff}
.pill,.st,.tag{text-transform:uppercase;letter-spacing:.08em;font-size:10.5px}
.pill{background:transparent;box-shadow:none;border-color:var(--line-2);color:var(--mist-light)}
.st-mist{background:transparent}
.checkline{text-transform:none;letter-spacing:0;background:transparent}
.checkline:hover{border-color:var(--ink);background:transparent;color:var(--text)}
.avatar{background:var(--ink);color:var(--bg);font-weight:600}
.bar{height:3px;border-radius:0;background:var(--surface-3)}
.bar>span{background:var(--ink);border-radius:0}
.stat-strip{gap:0;background:var(--surface);box-shadow:none}
.stat-strip>div{border-right:1px solid var(--line)}
.stat-strip>div:last-child{border-right:none}
.tbl-wrap{box-shadow:none}
.blind-note{border:1px solid var(--line-2);border-left:3px solid var(--ink);
  background:var(--bg-alt);color:var(--mist-light)}
.blind-note strong{color:var(--text)}
.ok-note{border-left:3px solid var(--teal)}
.flash{border-left-width:3px}
.list-check svg,.faq-q .ic{color:var(--brand)}
.nav-links a.on{background:transparent;color:var(--text)}
.crit-row{background:transparent;border-bottom:1px solid var(--line);border-radius:0}
.cd-cell{background:transparent}
input:focus,select:focus,textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,17,15,.07)}
.site-footer{border-top:1px solid var(--line-2)}
.logo-do{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ══ LEGACY INLINE COLOURS ══
   Older pages carry hard-coded purple and pink in style="" attributes,
   left over from the first theme. Inline styles beat the cascade, so
   these are neutralised by attribute selector rather than by editing
   every view. Remove once the views are cleaned up. */
[style*="color:rgba(108,59,250"]{color:var(--brand)!important}
[style*="background:rgba(108,59,250"]{background:var(--brand-tint)!important}
[style*="solid rgba(108,59,250"]{border-color:var(--line-2)!important}
.tbl th[style*="108,59,250"]{background:var(--brand-tint)!important;color:var(--brand-600)!important}
.tbl td[style*="108,59,250"]{background:var(--brand-tint)!important}
[style*="rgba(224,37,102,.05)"],[style*="rgba(224,37,102,.06)"],
[style*="rgba(224,37,102,.07)"],[style*="rgba(224,37,102,.1)"]{background:var(--brand-tint)!important}
/* decorative blur blobs: the gallery look is flat */
div[style*="filter:blur(100px)"],div[style*="filter:blur(120px)"],
div[style*="filter:blur(40px)"]{display:none!important}
/* the closing call-to-action band */
.rel[style*="border-radius:28px"]{border-radius:var(--r)!important;
  border:1px solid var(--line-2)!important;background:var(--bg-alt)!important}
.rel[style*="border-radius:28px"] .h2,.rel[style*="border-radius:28px"] .lead{color:var(--text)}


/* Footer gained a Legal column - widen the grid so it does not wrap to its own row. */
@media(min-width:768px){ .foot-grid{ grid-template-columns:1.4fr repeat(5,1fr); gap:26px } }
@media(min-width:768px) and (max-width:1100px){ .foot-grid{ grid-template-columns:1fr 1fr 1fr; gap:30px } }
@media(min-width:768px) and (max-width:1023px){ .foot-grid{ gap:30px } }


/* Buttons used on the dark hero bands (home + landing pages). Defined here so
   every page that uses a dark band gets them, not just the homepage. */
.hero-cta{background:#FBFAF7;color:#0C0A09;border-color:#FBFAF7}
.hero-cta:hover{background:#fff;color:#0C0A09;border-color:#fff}
.hero-cta-ghost{background:transparent;color:#FBFAF7;border:1px solid rgba(251,250,247,.45)}
.hero-cta-ghost:hover{background:rgba(251,250,247,.12);color:#fff;border-color:rgba(251,250,247,.7)}


/* ── "Who it's for" menu in the header ─────────────────────────────── */
.has-menu{position:relative}
.menu-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:14px;color:var(--mist);padding:0;transition:color .15s}
.menu-btn:hover,.menu-btn.on,.has-menu[data-open="1"] .menu-btn{color:var(--text)}
.menu-btn svg{width:9px;height:6px;transition:transform .18s}
.has-menu[data-open="1"] .menu-btn svg{transform:rotate(180deg)}
.menu-pop{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:264px;background:var(--surface);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 14px 40px rgba(20,17,15,.13);padding:8px;opacity:0;visibility:hidden;
  transition:opacity .16s,transform .16s,visibility .16s;z-index:60}
.has-menu[data-open="1"] .menu-pop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.menu-pop:before{content:'';position:absolute;top:-14px;left:0;right:0;height:14px}
.menu-pop a{display:block;padding:9px 12px;border-radius:5px;text-decoration:none;transition:background .12s}
.menu-pop a:hover{background:var(--bg-alt)}
.menu-pop strong{display:block;font-size:14px;font-weight:700;color:var(--text)}
.menu-pop span{display:block;font-size:12px;color:var(--mist);margin-top:2px;line-height:1.45}
.drawer-label{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist);margin:18px 0 6px}
@media(max-width:900px){ .has-menu{display:none} }


/* Nav labels must not wrap - a two-line "How it works" throws the whole bar out
   of alignment. Tighten the gaps instead, and drop the least essential items
   first as the viewport narrows. */
.nav-links{gap:22px;align-items:center}
.nav-links a,.menu-btn{white-space:nowrap}
.nav-links li{display:flex;align-items:center}
@media(max-width:1180px){ .nav-links{gap:16px} .nav-links a,.menu-btn{font-size:13.5px} }


/* The header must never force the page to scroll sideways. The signed-in state
   adds several extra items, so let the primary nav shrink and, if it still does
   not fit, scroll the nav itself rather than the document. */
html,body{overflow-x:clip}
/* Never let the two nav groups compress into each other - that produced
   overlapping labels. The primary nav keeps its width; the signed-in utility
   links are the ones that give way. */
.nav-links{flex-shrink:0;overflow:visible}
.nav-cta{flex-shrink:1;min-width:0;justify-content:flex-end}
@media(max-width:1500px){ .nav-cta .util-hide{display:none} }
/* A scrolling nav hid items and clipped the dropdown. Shed the least essential
   links as space runs out instead — the dropdown and Pricing always survive. */
@media(max-width:1240px){ .nav-links li:has(a[href="/leaderboard"]){display:none} }
@media(max-width:1120px){ .nav-links li:has(a[href="/explore"]){display:none} }