/* /web/public/home/home.css */
/* Standalone LIGHT theme with gradients */

/* ===== Tokens ===== */
:root{
  --bg:#f6fbff;
  --text:#0b1220;
  --muted:#5b6a7d;
  --card:#ffffff;
  --border:#e6ecf3;
  --shadow:0 14px 36px rgba(10,28,60,.12);
  --pop1:#1583ff;
  --pop2:#7a5cff;
  --pop3:#ffb500;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, #f7fbff 0%, #f3f8ff 45%, #f8fbff 100%);
}

/* ===== Nav ===== */
.site-top{
  position:sticky; top:0; z-index:20;
  background:#fff;
  border-bottom:1px solid var(--border);
}
.top-inner{
  max-width:1200px;
  margin:0 auto;
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:14px;
}
.top-left .logo img{height:34px; width:auto; display:block}
.top-search{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  background:#f3f7ff;
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
}
.top-search-input{
  border:none;
  outline:none;
  background:transparent;
  width:100%;
  font-size:14px;
}
.top-search-btn{
  border:none;
  background:#fff;
  border:1px solid var(--border);
  border-radius:999px;
  height:32px;
  width:38px;
  cursor:pointer;
}
.top-nav{
  display:flex;
  gap:14px;
  align-items:center;
}
.top-nav a{
  text-decoration:none;
  color:var(--text);
  font-weight:800;
  font-size:14px;
  opacity:.9;
}
.top-auth{display:flex; gap:8px; align-items:center}
.top-auth-btn{
  border:1px solid var(--border);
  border-radius:999px;
  padding:8px 10px;
  font-weight:900;
  cursor:pointer;
  background:#fff;
}
.top-auth-btn--primary{
  background:var(--pop1);
  border-color:transparent;
  color:#fff;
}
.top-auth-btn--ghost{background:#fff}

/* ===== Hero ===== */
.hero{
  position:relative;
  overflow:hidden;
  padding:44px 14px 34px;
  border-bottom:1px solid var(--border);
}
.hero-condensed{padding:18px 14px 18px}
.hero-bg{position:absolute; inset:0; pointer-events:none}
.blend{
  position:absolute;
  width:520px; height:520px;
  filter:blur(70px);
  opacity:.40;
  border-radius:999px;
}
.b1{left:-160px; top:-190px; background:#8bd4ff}
.b2{left:260px; top:-140px; background:#ffe08b}
.b3{right:-220px; top:-160px; background:#ffb6f0}
.hero-inner{max-width:1200px; margin:0 auto; position:relative}
.hero-tag{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--border);
  font-weight:900;
  font-size:12px;
  letter-spacing:.02em;
}
.hero-title{
  margin:18px 0 8px;
  font-size:62px;
  line-height:1.02;
  letter-spacing:-.02em;
  font-weight:1000;
}
.hero-title .pop{
  background:linear-gradient(90deg, var(--pop2), var(--pop1), var(--pop3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-sub{
  margin:0;
  max-width:720px;
  color:var(--muted);
  font-size:16px;
  line-height:1.55;
}
.cta-row{display:flex; gap:12px; margin-top:16px}
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  padding:12px 14px;
  font-weight:1000;
  text-decoration:none;
  border:1px solid var(--border);
}
.cta.primary{
  background:var(--pop1);
  border-color:transparent;
  color:#fff;
}
.cta.ghost{
  background:#fff;
  color:var(--text);
}

/* ===== Layout ===== */
.page{
  max-width:1200px;
  margin:0 auto;
  padding:18px 14px 40px;
  display:grid;
  grid-template-columns:1.55fr .9fr;
  gap:18px;
}
@media (max-width: 980px){
  .page{grid-template-columns:1fr}
}
.main-col{min-width:0}
.side-col{min-width:0}

/* ===== Search results ===== */
.search-results{margin-bottom:18px}
.search-results-hidden{display:none}
.search-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px}
.search-query-label{color:var(--muted); font-weight:800}
.search-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:12px;
}
@media (max-width: 980px){
  .search-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 560px){
  .search-grid{grid-template-columns:1fr}
}
.search-empty{
  display:none;
  margin-top:10px;
  color:var(--muted);
}
.search-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.search-card-thumb{
  position:relative;
  display:block;
  height:130px;
  background:#eef6ff;
}
.search-card-thumb img{width:100%; height:100%; object-fit:cover}
.search-card-logo{
  position:absolute;
  top:10px; left:10px;
  width:44px; height:44px;
  border-radius:999px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}
.search-card-logo img{width:100%; height:100%; object-fit:cover}
.search-card-body{padding:12px 12px 14px}
.search-card-title{margin:0; font-size:16px; font-weight:1000}
.search-card-sector{display:inline-flex; margin-left:8px; font-weight:900; font-size:12px; color:var(--muted)}
.search-card-line{margin:6px 0 0; color:var(--muted); font-size:12px}
.search-card-meta{margin:10px 0 0; color:var(--muted); font-size:13px; line-height:1.45}
.search-card-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.search-tag{
  font-size:11px;
  font-weight:900;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#f7fbff;
}
.search-card-link{
  display:inline-block;
  margin-top:12px;
  font-size:12px;
  color:var(--pop1);
  text-decoration:none;
  font-weight:1000;
}

/* ===== Rail ===== */
.rail{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:14px;
}
.card-xl{padding:18px}
.rail-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
.rail-head h2{margin:0; font-size:18px; font-weight:1000}
.rail-ctrl{display:flex; gap:8px}
.rail-ctrl button{
  border:1px solid var(--border);
  background:#fff;
  border-radius:12px;
  width:38px; height:36px;
  cursor:pointer;
  font-size:18px;
}
.rail-track{
  display:flex;
  gap:14px;
  overflow:auto;
  padding-bottom:8px;
  scroll-snap-type:x mandatory;
}

/* existing rail card base */
.rail-card{
  scroll-snap-align:start;
  min-width:260px; max-width:260px;
  border:1px solid var(--border); border-radius:16px;
  overflow:hidden; background:#fff; box-shadow:var(--shadow)
}
.rail-card .thumb{height:140px; background:#eef6ff}
.rail-card .thumb img{width:100%; height:100%; object-fit:cover}
.rail-card .meta{padding:10px 12px}
.rail-card .meta-head{display:flex; align-items:center; gap:8px; margin-bottom:4px}
.rail-card .meta-head img{
  width:32px; height:32px; border-radius:999px; object-fit:cover; border:1px solid var(--border)
}
.rail-card .meta-head .name{font-weight:900; font-size:14px}
.rail-card .meta-head .tagline{
  font-size:12px; color:var(--muted); margin-top:2px;
}
.rail-card .link{
  display:inline-block; margin-top:6px;
  font-size:12px; color:var(--pop1); text-decoration:none; font-weight:700;
}

/* ===== Live Brands Rail (upgraded to match Brands Hub cards) ===== */

.rail-card--hub .thumb{
  position: relative;
  height: 170px;
}
.rail-card--hub .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.rail-card--hub .thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.55));
  pointer-events:none;
}
.rail-logo-badge{
  position:absolute;
  top:12px;
  left:12px;
  width:44px;
  height:44px;
  border-radius:999px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 10px 24px rgba(0,0,0,0.22);
  z-index:2;
}
.rail-logo-badge img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.rail-hero-name{
  position:absolute;
  left:12px;
  right:12px;
  bottom:10px;
  z-index:2;
  font-weight:900;
  font-size:16px;
  color:#fff;
  text-shadow:0 10px 22px rgba(0,0,0,0.45);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rail-featured{margin-top:2px}
.rail-featured-title{
  font-size:11px;
  letter-spacing:0.08em;
  font-weight:900;
  color:rgba(20,32,50,0.65);
  margin-bottom:8px;
}
.rail-featured--empty .rail-empty{
  font-size:12px;
  color:var(--muted);
  padding:10px 0 6px;
}
.rail-prod-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}
.rail-prod{
  display:block;
  text-decoration:none;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 22px rgba(0,0,0,0.08);
  transition:transform 140ms ease, box-shadow 140ms ease;
}
.rail-prod:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(0,0,0,0.12);
}
.rail-prod-img{
  height:78px;
  background:#f3f6fb;
}
.rail-prod-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.rail-prod-meta{
  padding:8px 8px 9px;
}
.rail-prod-name{
  font-size:12px;
  font-weight:900;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rail-prod-price{
  margin-top:4px;
  font-size:12px;
  font-weight:900;
  color:var(--pop1);
}

/* How it works */
.how{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px; margin-top:22px
}
.glass{background:#ffffffd9; border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow)}
.step{padding:16px}
.step .num{
  width:28px; height:28px; border-radius:10px;
  background:rgba(255,181,0,.35); display:flex; align-items:center; justify-content:center;
  font-weight:1000; margin-bottom:10px;
}
.step h3{margin:0; font-weight:1000}
.step p{margin:8px 0 0; color:var(--muted)}

/* ===== Board / leaderboard ===== */
.board{padding:16px}
.board-tabs{display:flex; gap:8px; margin-bottom:12px}
.tab{
  border:1px solid var(--border);
  background:#fff;
  border-radius:14px;
  padding:10px 12px;
  font-weight:1000;
  cursor:pointer;
  flex:1;
}
.tab.active{background:#fff6d6}
.board-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.hidden{display:none}
.entry{
  display:grid;
  grid-template-columns:34px 1fr auto;
  gap:10px;
  align-items:center;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 10px;
}
.entry .pos{
  width:28px; height:28px;
  border-radius:10px;
  background:#eef6ff;
  font-weight:1000;
  display:flex; align-items:center; justify-content:center;
}
.entry .who .name{font-weight:1000}
.entry .who .meta{font-size:12px; color:var(--muted)}
.entry .stat{font-weight:1000; color:var(--muted)}

/* ===== Footer ===== */
.site-foot{
  border-top:1px solid var(--border);
  background:#fff;
}
.foot-inner{
  max-width:1200px;
  margin:0 auto;
  padding:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.foot-links{display:flex; gap:14px}
.foot-links a{color:var(--muted); text-decoration:none; font-weight:900}

/* ===== Auth modal ===== */
.auth-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50;
}
.auth-modal-open{display:flex}
.auth-modal-dialog{
  width:min(420px, calc(100vw - 24px));
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.25);
  position:relative;
}
.auth-modal-close{
  position:absolute;
  top:10px;
  right:10px;
  border:1px solid var(--border);
  background:#fff;
  width:34px;
  height:34px;
  border-radius:12px;
  cursor:pointer;
}
.auth-modal-title{margin:0; font-weight:1000}
.auth-modal-sub{margin:8px 0 14px; color:var(--muted)}
.auth-google-btn{
  width:100%;
  border:1px solid var(--border);
  background:#fff;
  padding:12px;
  border-radius:14px;
  cursor:pointer;
  font-weight:1000;
}
.auth-divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0;
  color:var(--muted);
  font-weight:900;
}
.auth-divider:before,
.auth-divider:after{
  content:"";
  height:1px;
  background:var(--border);
  flex:1;
}
.auth-form{display:flex; flex-direction:column; gap:10px}
.auth-label{font-weight:1000; font-size:13px}
.auth-label input{
  margin-top:6px;
  width:100%;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
}
.auth-submit-btn{
  margin-top:6px;
  width:100%;
  border:none;
  background:var(--pop1);
  color:#fff;
  border-radius:14px;
  padding:12px;
  font-weight:1000;
  cursor:pointer;
}
.auth-error{color:#c0392b; font-weight:900; margin:10px 0 0}
/* ===== Live Brands Rail (REDESIGNED) ===== */

/* make the rail area use the space better */
.rail-track{
  align-items: stretch;
  padding-bottom: 10px;
}

/* premium card */
.livecard{
  min-width: 480px;
  max-width: 480px;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

@media (max-width: 980px){
  .livecard{ min-width: 86vw; max-width: 86vw; }
}

/* hero */
.livecard-hero{
  position: relative;
  height: 210px;
  display: block;
  text-decoration: none;
  color: #fff;
  background: #eef6ff;
}
.livecard-hero-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.livecard-hero-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.62) 100%);
}

/* logo badge */
.livecard-logo{
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 16px 36px rgba(0,0,0,0.26);
  z-index: 3;
  display: grid;
  place-items: center;
}
.livecard-logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.livecard-logo--placeholder{
  font-weight: 1000;
  font-size: 20px;
  color: #0b1220;
}

/* title overlay */
.livecard-title{
  position: absolute;
  left: 80px;
  right: 14px;
  bottom: 16px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.livecard-name{
  font-weight: 1000;
  font-size: 18px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 14px 30px rgba(0,0,0,0.45);
}
.livecard-sub{
  font-weight: 900;
  font-size: 12px;
  opacity: 0.92;
  text-shadow: 0 14px 30px rgba(0,0,0,0.45);
}

/* body */
.livecard-body{
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* featured header */
.livecard-featured-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(20,32,50,0.7);
}
.livecard-featured-count{
  letter-spacing: normal;
  font-weight: 1000;
  color: rgba(20,32,50,0.55);
}

.livecard-prod-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 560px){
  .livecard-prod-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* product mini cards */
.livecard-prod{
  display: block;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 26px rgba(0,0,0,0.10);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.livecard-prod:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0,0,0,0.14);
}
.livecard-prod img{
  width: 100%;
  height: 92px;
  object-fit: cover;
  display: block;
  background: #f3f6fb;
}
.livecard-prod-meta{
  padding: 8px 9px 10px;
}
.livecard-prod-name{
  font-weight: 1000;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.livecard-prod-price{
  margin-top: 5px;
  font-weight: 1000;
  font-size: 12px;
  color: var(--pop1);
}

.livecard-empty{
  font-size: 13px;
  color: var(--muted);
  padding: 8px 0 2px;
}

/* CTA */
.livecard-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--pop1);
  color: #fff;
  text-decoration: none;
  font-weight: 1000;
}

/* skeleton */
.livecard-skel{
  min-width: 480px;
  max-width: 480px;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 14px;
}
.skel-hero{
  height: 210px;
  border-radius: 14px;
  background: linear-gradient(90deg, #eef2f7 0%, #f6f8fb 50%, #eef2f7 100%);
  background-size: 220% 100%;
  animation: sk 1.15s infinite linear;
}
.skel-row{
  margin-top: 12px;
  height: 16px;
  border-radius: 10px;
  background: linear-gradient(90deg, #eef2f7 0%, #f6f8fb 50%, #eef2f7 100%);
  background-size: 220% 100%;
  animation: sk 1.15s infinite linear;
}
.skel-row.short{ width: 60%; }
@keyframes sk{
  0%{ background-position: 0% 0; }
  100%{ background-position: 220% 0; }
}


/* ===== Coming soon gate ===== */
body.coming-soon-locked{
  overflow:hidden;
}
.page-shell{
  min-height:100vh;
}
.coming-soon-locked .page-shell{
  visibility:hidden;
  pointer-events:none;
  user-select:none;
}
.coming-soon-gate{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at top left, rgba(21,131,255,.24), transparent 34%),
    radial-gradient(circle at bottom right, rgba(122,92,255,.2), transparent 30%),
    linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
}
.coming-soon-gate[hidden]{display:none}
.coming-soon-card{
  width:min(460px, 100%);
  background:#fff;
  border:1px solid var(--border);
  border-radius:28px;
  box-shadow:0 30px 80px rgba(10,28,60,.18);
  padding:30px 26px;
}
.coming-soon-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:7px 12px;
  border-radius:999px;
  background:#eff6ff;
  border:1px solid var(--border);
  font-size:12px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.coming-soon-title{
  margin:16px 0 10px;
  font-size:48px;
  line-height:1;
  letter-spacing:-.03em;
}
.coming-soon-copy{
  margin:0 0 18px;
  color:var(--muted);
  line-height:1.6;
}
.coming-soon-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.coming-soon-label{
  font-size:13px;
  font-weight:1000;
}
.coming-soon-input{
  width:100%;
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 16px;
  font-size:15px;
  outline:none;
  background:#fff;
}
.coming-soon-input:focus{
  border-color:rgba(21,131,255,.55);
  box-shadow:0 0 0 4px rgba(21,131,255,.12);
}
.coming-soon-btn{
  border:none;
  border-radius:16px;
  padding:14px 16px;
  background:linear-gradient(90deg, var(--pop1), var(--pop2));
  color:#fff;
  font-weight:1000;
  cursor:pointer;
}
.coming-soon-error{
  min-height:20px;
  margin:12px 0 0;
  color:#c0392b;
  font-weight:900;
}


/* ===== Unified search groups ===== */
.search-results{display:block}
.search-results #searchBrandGrid{display:block}
.search-result-group{margin-top:18px}
.search-result-group:first-child{margin-top:12px}
.search-result-group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.search-result-group-title{
  margin:0;
  font-size:18px;
  font-weight:1000;
}
.search-result-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
  font-size:12px;
  font-weight:1000;
}
.search-grid-tags{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width: 700px){
  .search-grid-tags{grid-template-columns:1fr}
}
.search-card-user .search-card-thumb-user{
  height:180px;
  background:linear-gradient(180deg,#eef6ff,#f9fbff);
}
.search-card-user .search-card-thumb-user img{
  object-fit:cover;
}
.search-card-tag{
  display:flex;
  align-items:stretch;
}
.search-card-tag .search-card-body{
  width:100%;
}
.search-tag-hero{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg,var(--pop2),var(--pop1));
  color:#fff;
  font-size:28px;
  font-weight:1000;
  margin-bottom:12px;
}
.topic-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.topic-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  color:var(--text);
  cursor:pointer;
  font-weight:1000;
  box-shadow:var(--shadow);
}
.topic-chip strong{
  color:var(--pop1);
  font-size:12px;
}
.topic-chip:hover{
  transform:translateY(-1px);
}
.search-loading,
.search-error{
  margin-top:12px;
  padding:16px 18px;
  border-radius:16px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
  font-weight:900;
}


.search-card-type-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  background:#f3f7ff;
  border:1px solid var(--border);
  color:var(--muted);
  font-size:11px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.search-card-topic .search-card-body{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.search-loading,
.search-error{
  padding:16px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:16px;
  box-shadow:var(--shadow);
  color:var(--muted);
  font-weight:900;
}


.search-topic-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
}
.search-card-link--topic{
  margin-top:0;
}
.topic-like-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:84px;
  min-height:36px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  font-size:12px;
  font-weight:1000;
  cursor:pointer;
  transition:transform 120ms ease, box-shadow 120ms ease, background 120ms ease, color 120ms ease;
}
.topic-like-action:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(10,28,60,.10);
}
.topic-like-action.is-liked{
  background:linear-gradient(90deg, var(--pop1), var(--pop2));
  border-color:transparent;
  color:#fff;
}
.search-card-topic .search-card-meta{
  min-height:40px;
}

/* ===== Live Brands Rail Positioning Fix ===== */
.rail-track{
  width:100%;
  max-width:100%;
  display:flex;
  align-items:stretch;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
}

.livecard,
.livecard-skel{
  flex:0 0 min(480px, calc(100vw - 64px));
  min-width:0;
  max-width:480px;
}

.livecard-hero{
  width:100%;
  overflow:hidden;
}

.livecard-hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.livecard-body{
  min-height:190px;
}

.livecard-prod-row{
  width:100%;
}

.livecard-prod img{
  object-fit:cover;
  object-position:center;
}

@media (max-width: 560px){
  .livecard,
  .livecard-skel{
    flex-basis:calc(100vw - 48px);
    max-width:calc(100vw - 48px);
  }
}


/* ===== Mobile header optimization ===== */
@media (max-width: 820px){
  .site-top{
    position:sticky;
    top:0;
    z-index:60;
    box-shadow:0 10px 24px rgba(10,28,60,.08);
  }

  .top-inner{
    width:100%;
    max-width:none;
    padding:8px max(10px, env(safe-area-inset-left)) 9px max(10px, env(safe-area-inset-right));
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    grid-template-areas:
      "logo nav"
      "search search";
    gap:7px 10px;
    align-items:center;
  }

  .top-left{
    grid-area:logo;
    min-width:0;
  }

  .top-left .logo img{
    height:28px;
  }

  .top-search{
    grid-area:search;
    min-width:0;
    width:100%;
    padding:5px 8px;
    gap:6px;
    border-radius:16px;
  }

  .top-search-input{
    min-width:0;
    font-size:13px;
  }

  .top-search-input::placeholder{
    color:transparent;
  }

  .top-search-input:placeholder-shown{
    text-overflow:ellipsis;
  }

  .top-search-btn{
    flex:0 0 34px;
    width:34px;
    height:30px;
  }

  .top-nav{
    grid-area:nav;
    min-width:0;
    justify-self:end;
    display:flex;
    align-items:center;
    gap:7px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    max-width:100%;
    padding:2px 0 3px 4px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .top-nav::-webkit-scrollbar{
    display:none;
  }

  .top-nav a{
    flex:0 0 auto;
    font-size:12px;
    line-height:1;
    padding:8px 9px;
    border:1px solid var(--border);
    border-radius:999px;
    background:#fff;
  }

  .top-auth{
    flex:0 0 auto;
    gap:6px;
  }

  .top-auth-btn{
    min-height:30px;
    padding:7px 9px;
    font-size:12px;
    line-height:1;
  }

  .hero{
    padding-top:28px;
  }

  .hero-title{
    font-size:clamp(36px, 10vw, 52px);
  }
}

@media (max-width: 520px){
  .top-inner{
    grid-template-columns:auto minmax(0, 1fr);
    gap:6px 8px;
  }

  .top-left .logo img{
    height:25px;
  }

  .top-nav{
    gap:5px;
  }

  .top-nav a{
    font-size:11px;
    padding:7px 8px;
  }

  .top-auth-btn{
    min-height:28px;
    padding:6px 8px;
    font-size:11px;
  }

  #homeCreateBtn{
    display:none !important;
  }

  .top-search{
    padding:4px 7px;
  }

  .top-search-input{
    font-size:12px;
  }

  .top-search-btn{
    width:32px;
    height:28px;
    flex-basis:32px;
  }

  .hero{
    padding:22px 12px 26px;
  }

  .cta-row{
    flex-direction:column;
  }

  .cta{
    width:100%;
  }
}

@media (max-width: 380px){
  .top-nav a[href="/blanks/"]{
    display:none;
  }

  .top-nav a,
  .top-auth-btn{
    padding-left:7px;
    padding-right:7px;
  }
}

/* ===== Home ownership + item leveling sections ===== */
.home-systems-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 14px 42px;
  display:grid;
  gap:18px;
}

.brand-ownership-system,
.brand-challenges-showcase{
  position:relative;
  width:100%;
  margin:0;
  overflow:hidden;
  border-radius:26px;
  isolation:isolate;
}

.brand-ownership-system{
  padding:28px;
  background:
    radial-gradient(circle at 12% 0%, rgba(21,131,255,.24), transparent 34%),
    radial-gradient(circle at 90% 20%, rgba(122,92,255,.20), transparent 32%),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 48%, #eef6ff 100%);
  border:1px solid rgba(21,131,255,.18);
  box-shadow:var(--shadow);
}

.brand-ownership-system::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.72), transparent 46%, rgba(255,181,0,.10));
  pointer-events:none;
  z-index:-1;
}

.brand-ownership-glow{
  position:absolute;
  right:-130px;
  top:-150px;
  width:340px;
  height:340px;
  border-radius:999px;
  background:rgba(21,131,255,.18);
  filter:blur(20px);
  z-index:-1;
}

.brand-ownership-head,
.brand-ownership-layout{
  position:relative;
  z-index:1;
}

.brand-ownership-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}

.brand-ownership-kicker,
.brand-ownership-card-kicker{
  font-size:11px;
  line-height:1;
  letter-spacing:.16em;
  font-weight:1000;
  color:var(--pop1);
  text-transform:uppercase;
}

.brand-ownership-title{
  margin:8px 0 8px;
  font-size:38px;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--text);
}

.brand-ownership-subtitle{
  margin:0;
  max-width:650px;
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
  font-weight:700;
}

.brand-ownership-badge{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--border);
  box-shadow:0 12px 26px rgba(10,28,60,.08);
  white-space:nowrap;
}
.brand-ownership-badge span:first-child{font-weight:1000;color:var(--text);}
.brand-ownership-badge span:last-child{font-size:11px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}

.brand-ownership-layout{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:18px;
  align-items:stretch;
}

.brand-ownership-flow{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.brand-ownership-step{
  position:relative;
  padding:16px;
  min-height:112px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 10px 24px rgba(10,28,60,.08);
}
.brand-ownership-step span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:999px;
  background:#eef6ff;
  color:var(--pop1);
  font-size:12px;
  font-weight:1000;
  margin-bottom:12px;
}
.brand-ownership-step strong{display:block;color:var(--text);font-size:22px;font-weight:1000;line-height:1;}
.brand-ownership-step small{display:block;margin-top:7px;color:var(--muted);font-size:13px;font-weight:800;line-height:1.35;}
.brand-ownership-step--claim{background:linear-gradient(135deg,#fff7dd,#fff);border-color:rgba(255,181,0,.36);}

.brand-ownership-registry-card{
  padding:18px;
  border-radius:22px;
  background:#0b1220;
  color:#fff;
  box-shadow:0 18px 36px rgba(10,28,60,.20);
  border:1px solid rgba(255,255,255,.12);
}
.brand-ownership-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
.brand-ownership-card-top h3{margin:6px 0 0;color:#fff;font-size:24px;line-height:1.05;letter-spacing:-.02em;}
.brand-ownership-live-dot{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.78);font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.08em;}
.brand-ownership-live-dot span{width:8px;height:8px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.15);}
.brand-ownership-ledger{display:grid;gap:8px;}
.brand-ownership-ledger-row{display:grid;grid-template-columns:78px 1fr 128px 88px;gap:10px;align-items:center;padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);font-size:12px;}
.brand-ownership-serial{font-weight:1000;color:#ffd86b;}
.brand-ownership-owner{font-weight:1000;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.brand-ownership-edition{color:rgba(255,255,255,.68);font-weight:800;}
.brand-ownership-check{color:#86efac;font-weight:1000;text-align:right;}
.brand-ownership-card-foot{display:flex;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.10);}
.brand-ownership-card-foot strong{font-size:13px;line-height:1.35;color:#fff;}
.brand-ownership-card-foot span{font-size:11px;color:rgba(255,255,255,.56);font-weight:900;text-transform:uppercase;letter-spacing:.08em;text-align:right;}

.brand-challenges-showcase{
  padding:28px;
  background:
    radial-gradient(circle at 0% 0%, rgba(122,92,255,.24), transparent 36%),
    radial-gradient(circle at 100% 0%, rgba(255,181,0,.18), transparent 34%),
    linear-gradient(135deg, #0b1220 0%, #111827 58%, #16233b 100%);
  box-shadow:0 22px 46px rgba(10,28,60,.20);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
}
.brand-challenges-showcase::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.05),transparent 42%,rgba(255,255,255,.035));pointer-events:none;}
.brand-challenges-head,.brand-challenge-tier-grid,.brand-challenges-cta{position:relative;z-index:1;}
.brand-challenges-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px;}
.brand-challenges-kicker{font-size:11px;line-height:1;letter-spacing:.16em;font-weight:1000;color:#ffd86b;text-transform:uppercase;}
.brand-challenges-title{margin:8px 0 8px;font-size:38px;line-height:1;letter-spacing:-.03em;color:#fff;}
.brand-challenges-subtitle{margin:0;max-width:660px;color:rgba(255,255,255,.68);font-size:15px;line-height:1.55;font-weight:700;}
.brand-challenges-path{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);white-space:nowrap;}
.brand-challenges-path span{font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.08em;color:#fff;}
.brand-challenges-path b{color:rgba(255,255,255,.45);}
.brand-challenge-tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.brand-challenge-tier-card{padding:16px;border-radius:20px;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 36px rgba(0,0,0,.22);min-width:0;transition:transform .15s ease, border-color .15s ease;}
.brand-challenge-tier-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.22);}
.brand-challenge-tier-card--one{background:radial-gradient(circle at 0% 0%, rgba(34,197,94,.24), transparent 40%), rgba(2,6,23,.72);}
.brand-challenge-tier-card--two{background:radial-gradient(circle at 0% 0%, rgba(234,179,8,.25), transparent 42%), rgba(2,6,23,.74);}
.brand-challenge-tier-card--three{background:radial-gradient(circle at 0% 0%, rgba(244,63,94,.28), transparent 42%), radial-gradient(circle at 100% 0%, rgba(168,85,247,.25), transparent 40%), rgba(2,6,23,.76);}
.brand-challenge-tier-top{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;}
.brand-challenge-tier-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:16px;background:rgba(255,255,255,.10);font-size:22px;border:1px solid rgba(255,255,255,.12);}
.brand-challenge-tier-card h3{margin:0;color:#fff;font-size:16px;line-height:1.15;font-weight:1000;}
.brand-challenge-tier-card p{margin:5px 0 0;color:rgba(255,255,255,.58);font-size:12px;line-height:1.35;font-weight:800;}
.brand-challenge-feature{padding:12px;border-radius:15px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);}
.brand-challenge-feature strong,.brand-challenge-modal-item strong{display:block;color:#fff;font-size:13px;font-weight:1000;line-height:1.2;}
.brand-challenge-feature span,.brand-challenge-modal-item span{display:block;margin-top:5px;color:rgba(255,255,255,.60);font-size:12px;font-weight:750;line-height:1.35;}
.brand-challenge-mini-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;}
.brand-challenge-mini-pills span{display:inline-flex;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.76);font-size:10px;font-weight:1000;text-transform:uppercase;letter-spacing:.06em;}
.brand-challenge-reward{margin-top:12px;color:#ffd86b;font-size:12px;font-weight:1000;}
.brand-challenge-view-btn{width:100%;margin-top:12px;border:0;border-radius:999px;padding:11px 12px;background:#fff;color:#0b1220;font-size:12px;font-weight:1000;cursor:pointer;}
.brand-challenge-view-btn:hover{filter:brightness(1.03);transform:translateY(-1px);}
.brand-challenges-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.72);font-weight:800;line-height:1.35;}
.brand-challenges-cta strong{color:#fff;font-weight:1000;}
.brand-challenges-cta span{color:rgba(255,255,255,.58);font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.08em;text-align:right;}

.brand-challenge-modal[hidden]{display:none!important;}
.brand-challenge-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:18px;}
.brand-challenge-modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.70);backdrop-filter:blur(8px);}
.brand-challenge-modal-card{position:relative;width:min(760px,100%);max-height:84vh;overflow:auto;padding:22px;border-radius:26px;background:#0b1220;color:#fff;border:1px solid rgba(255,255,255,.12);box-shadow:0 28px 80px rgba(0,0,0,.48);}
.brand-challenge-modal-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:999px;background:rgba(255,255,255,.10);color:#fff;font-size:22px;cursor:pointer;}
.brand-challenge-modal-kicker{font-size:11px;line-height:1;letter-spacing:.16em;font-weight:1000;color:#ffd86b;text-transform:uppercase;}
.brand-challenge-modal-title{margin:9px 46px 7px 0;color:#fff;font-size:30px;line-height:1;font-weight:1000;}
.brand-challenge-modal-sub{margin:0 0 12px;color:rgba(255,255,255,.62);font-weight:750;line-height:1.45;}
.brand-challenge-modal-reward{display:inline-flex;margin-bottom:14px;padding:8px 10px;border-radius:999px;background:rgba(255,216,107,.12);border:1px solid rgba(255,216,107,.22);color:#ffd86b;font-size:12px;font-weight:1000;}
.brand-challenge-modal-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.brand-challenge-modal-item{padding:13px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);}
body.brand-challenge-modal-open{overflow:hidden;}

@media (max-width:900px){
  .brand-ownership-head,.brand-challenges-head{flex-direction:column;}
  .brand-ownership-layout{grid-template-columns:1fr;}
  .brand-ownership-flow{grid-template-columns:repeat(3,minmax(150px,1fr));overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
  .brand-ownership-step{scroll-snap-align:start;}
  .brand-challenge-tier-grid{grid-template-columns:1fr;}
}

@media (max-width:560px){
  .home-systems-wrap{padding:0 12px 30px;}
  .brand-ownership-system,.brand-challenges-showcase{border-radius:20px;padding:18px 14px;}
  .brand-ownership-title,.brand-challenges-title{font-size:28px;}
  .brand-ownership-subtitle,.brand-challenges-subtitle{font-size:13px;}
  .brand-ownership-badge{width:100%;align-items:flex-start;}
  .brand-ownership-card-top,.brand-ownership-card-foot,.brand-challenges-cta{flex-direction:column;align-items:flex-start;}
  .brand-ownership-card-foot span,.brand-challenges-cta span{text-align:left;}
  .brand-ownership-ledger-row{grid-template-columns:66px 1fr;}
  .brand-ownership-edition,.brand-ownership-check{grid-column:2;text-align:left;}
  .brand-challenges-path{max-width:100%;overflow-x:auto;}
  .brand-challenge-modal{padding:12px;align-items:flex-end;}
  .brand-challenge-modal-card{width:100%;max-height:86vh;border-radius:22px 22px 0 0;padding:18px 14px;}
  .brand-challenge-modal-list{grid-template-columns:1fr;}
}

/* ========================================================= */
/* HOME SYSTEMS LIGHT RESTYLE OVERRIDES                      */
/* Cleaner homepage fit: removes dark brand-page styling      */
/* ========================================================= */
.home-systems-wrap {
  background: #f7fbff;
}

.home-ownership-system.brand-ownership-system,
.home-challenges-showcase.brand-challenges-showcase {
  color: var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(21,131,255,.10), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(255,181,0,.12), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 52%, #eff6ff 100%);
  border: 1px solid rgba(21,131,255,.18);
  box-shadow: 0 16px 34px rgba(10,28,60,.10);
}

.home-challenges-showcase.brand-challenges-showcase::before {
  background: linear-gradient(90deg, rgba(255,255,255,.65), transparent 44%, rgba(21,131,255,.04));
}

.home-ownership-system .brand-ownership-title,
.home-challenges-showcase .brand-challenges-title {
  color: var(--text);
}

.home-ownership-system .brand-ownership-subtitle,
.home-challenges-showcase .brand-challenges-subtitle {
  color: #536174;
}

.home-ownership-system .brand-ownership-kicker,
.home-ownership-system .brand-ownership-card-kicker,
.home-challenges-showcase .brand-challenges-kicker {
  color: var(--pop1);
}

.home-ownership-system .brand-ownership-badge,
.home-challenges-showcase .brand-challenges-path,
.home-challenges-showcase .brand-challenges-cta {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(21,131,255,.18);
  color: #536174;
  box-shadow: 0 10px 24px rgba(10,28,60,.08);
}

.home-challenges-showcase .brand-challenges-path span,
.home-challenges-showcase .brand-challenges-cta strong {
  color: var(--text);
}

.home-challenges-showcase .brand-challenges-path b,
.home-challenges-showcase .brand-challenges-cta span {
  color: #6b7788;
}

.home-ownership-system .brand-ownership-step {
  background: #ffffff;
  border-color: rgba(21,131,255,.16);
  box-shadow: 0 10px 22px rgba(10,28,60,.08);
}

.home-ownership-system .brand-ownership-step--claim {
  background: linear-gradient(135deg, #fff7db, #ffffff 70%);
  border-color: rgba(255,181,0,.34);
}

.home-ownership-system .brand-ownership-registry-card {
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  color: var(--text);
  border: 1px solid rgba(21,131,255,.18);
  box-shadow: 0 14px 30px rgba(10,28,60,.10);
}

.home-ownership-system .brand-ownership-card-top h3,
.home-ownership-system .brand-ownership-owner,
.home-ownership-system .brand-ownership-card-foot strong {
  color: var(--text);
}

.home-ownership-system .brand-ownership-live-dot {
  background: #eff6ff;
  border-color: rgba(21,131,255,.18);
  color: #536174;
}

.home-ownership-system .brand-ownership-ledger-row {
  background: #ffffff;
  border: 1px solid rgba(21,131,255,.14);
  box-shadow: 0 8px 18px rgba(10,28,60,.06);
}

.home-ownership-system .brand-ownership-serial {
  color: #0f6fd6;
}

.home-ownership-system .brand-ownership-edition,
.home-ownership-system .brand-ownership-card-foot span {
  color: #6b7788;
}

.home-ownership-system .brand-ownership-check {
  color: #109447;
}

.home-ownership-system .brand-ownership-card-foot {
  border-top: 1px solid rgba(21,131,255,.14);
}

.home-challenges-showcase .brand-challenge-tier-card {
  background: #ffffff;
  border: 1px solid rgba(21,131,255,.16);
  box-shadow: 0 12px 26px rgba(10,28,60,.08);
}

.home-challenges-showcase .brand-challenge-tier-card--one {
  background: radial-gradient(circle at 0% 0%, rgba(34,197,94,.12), transparent 38%), #ffffff;
}
.home-challenges-showcase .brand-challenge-tier-card--two {
  background: radial-gradient(circle at 0% 0%, rgba(255,181,0,.14), transparent 38%), #ffffff;
}
.home-challenges-showcase .brand-challenge-tier-card--three {
  background: radial-gradient(circle at 0% 0%, rgba(122,92,255,.13), transparent 38%), #ffffff;
}

.home-challenges-showcase .brand-challenge-tier-icon {
  background: #eff6ff;
  border-color: rgba(21,131,255,.16);
}

.home-challenges-showcase .brand-challenge-tier-card h3,
.home-challenges-showcase .brand-challenge-feature strong {
  color: var(--text);
}

.home-challenges-showcase .brand-challenge-tier-card p,
.home-challenges-showcase .brand-challenge-feature span {
  color: #536174;
}

.home-challenges-showcase .brand-challenge-feature,
.home-challenges-showcase .brand-challenge-mini-pills span {
  background: rgba(247,251,255,.86);
  border: 1px solid rgba(21,131,255,.14);
  color: #536174;
}

.home-challenges-showcase .brand-challenge-reward {
  color: #0f6fd6;
}

.home-challenges-showcase .brand-challenge-view-btn {
  background: #1583ff;
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(21,131,255,.20);
}

.home-challenges-showcase .brand-challenge-view-btn:hover {
  background: #0f6fd6;
}

.brand-challenge-modal-card {
  background: #ffffff;
  color: var(--text);
  border: 1px solid rgba(21,131,255,.18);
}

.brand-challenge-modal-close {
  background: #eff6ff;
  color: var(--text);
}

.brand-challenge-modal-kicker,
.brand-challenge-modal-reward {
  color: var(--pop1);
}

.brand-challenge-modal-title,
.brand-challenge-modal-item strong {
  color: var(--text);
}

.brand-challenge-modal-sub,
.brand-challenge-modal-item span {
  color: #536174;
}

.brand-challenge-modal-reward {
  background: rgba(21,131,255,.10);
  border: 1px solid rgba(21,131,255,.18);
}

.brand-challenge-modal-item {
  background: #f7fbff;
  border: 1px solid rgba(21,131,255,.14);
}


/* ========================================================= */
/* HOME SYSTEMS POSITION + DARK BORDER POP OVERRIDES         */
/* ========================================================= */
.home-systems-wrap {
  width: min(1180px, 94vw);
  margin: 26px auto 28px;
  padding: 0;
  background: transparent;
}

.home-ownership-system.brand-ownership-system,
.home-challenges-showcase.brand-challenges-showcase {
  border: 3px solid #111827 !important;
  box-shadow:
    0 18px 42px rgba(17, 24, 39, .16),
    0 0 0 1px rgba(255,255,255,.75) inset;
}

.home-ownership-system .brand-ownership-registry-card,
.home-challenges-showcase .brand-challenge-tier-card {
  border: 2px solid rgba(17, 24, 39, .72) !important;
}

.home-ownership-system .brand-ownership-step,
.home-ownership-system .brand-ownership-ledger-row,
.home-challenges-showcase .brand-challenge-feature,
.home-challenges-showcase .brand-challenge-mini-pills span,
.home-ownership-system .brand-ownership-badge,
.home-challenges-showcase .brand-challenges-path,
.home-challenges-showcase .brand-challenges-cta {
  border-color: rgba(17, 24, 39, .42) !important;
}

.home-ownership-system .brand-ownership-step--claim {
  border-color: #111827 !important;
}

@media (max-width: 640px) {
  .home-systems-wrap {
    width: 100%;
    padding: 0 12px;
    margin: 18px auto 22px;
  }

  .home-ownership-system.brand-ownership-system,
  .home-challenges-showcase.brand-challenges-showcase {
    border-width: 2px !important;
  }
}


/* ========================= */
/* HOME NFC SCAN SECTION     */
/* ========================= */
.home-nfc-section {
  width: min(1200px, calc(100% - 32px));
  margin: 22px auto 24px;
  padding: 24px;
  border: 2px solid #111827;
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.10);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: 24px;
  align-items: center;
}

.home-nfc-copy {
  min-width: 0;
}

.home-nfc-kicker {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  margin-bottom: 14px;
  border-radius: 999px;
  border: 1px solid #1d4ed8;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.home-nfc-title {
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.04;
  color: #0f172a;
}

.home-nfc-sub {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.65;
  color: #334155;
  max-width: 680px;
}

.home-nfc-points {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.home-nfc-point {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1.5px solid #0f172a;
  border-radius: 18px;
  background: #ffffff;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.55;
}

.home-nfc-point-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  font-size: 22px;
}

.home-nfc-visual {
  min-width: 0;
  border: 2px solid #111827;
  border-radius: 24px;
  background: #fff;
  padding: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
}

.home-nfc-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

@media (max-width: 960px) {
  .home-nfc-section {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .home-nfc-visual {
    order: -1;
  }
}

@media (max-width: 640px) {
  .home-nfc-section {
    width: min(100%, calc(100% - 20px));
    margin: 16px auto 22px;
    padding: 16px;
    border-radius: 22px;
    gap: 16px;
  }

  .home-nfc-title {
    font-size: 28px;
  }

  .home-nfc-sub {
    font-size: 15px;
  }

  .home-nfc-point {
    grid-template-columns: 40px 1fr;
    padding: 12px 12px;
    font-size: 14px;
  }

  .home-nfc-point-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}


/* ========================= */
/* HOME AUTH ITEM PROFILE    */
/* ========================= */
.home-item-profile-section {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto 24px;
  padding: 24px;
  border: 2px solid #111827;
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.10);
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
  gap: 24px;
  align-items: center;
}

.home-item-profile-visual {
  min-width: 0;
  border: 2px solid #111827;
  border-radius: 24px;
  background: #ffffff;
  padding: 12px;
}

.home-item-profile-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

.home-item-profile-copy {
  min-width: 0;
}

.home-item-profile-kicker {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  margin-bottom: 14px;
  border-radius: 999px;
  border: 1px solid #059669;
  background: #ecfdf5;
  color: #047857;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.home-item-profile-title {
  margin: 0;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.05;
  color: #0f172a;
}

.home-item-profile-sub {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.65;
  color: #334155;
}

.home-item-profile-points {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.home-item-profile-point {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1.5px solid #0f172a;
  border-radius: 18px;
  background: #ffffff;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.55;
}

.home-item-profile-point-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  font-size: 22px;
}

@media (max-width: 960px) {
  .home-item-profile-section {
    grid-template-columns: 1fr;
    padding: 20px;
  }
}

@media (max-width: 640px) {
  .home-item-profile-section {
    width: min(100%, calc(100% - 20px));
    margin: 0 auto 22px;
    padding: 16px;
    border-radius: 22px;
    gap: 16px;
  }

  .home-item-profile-title {
    font-size: 28px;
  }

  .home-item-profile-sub {
    font-size: 15px;
  }

  .home-item-profile-point {
    grid-template-columns: 40px 1fr;
    padding: 12px;
    font-size: 14px;
  }

  .home-item-profile-point-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}


.home-section-cta-row{
  margin-top:20px;
  flex-wrap:wrap;
}

.home-nfc-section .cta,
.home-item-profile-section .cta{
  min-width:180px;
}

.home-item-profile-section .cta.ghost{
  background:#f8fafc;
}

@media (max-width: 640px){
  .home-section-cta-row{
    margin-top:16px;
  }

  .home-nfc-section .cta,
  .home-item-profile-section .cta{
    min-width:0;
  }
}


/* ========================= */
/* HOME PROFILE FLEX SECTION */
/* ========================= */
.home-profile-flex-section{
  width:min(1200px,calc(100% - 32px));
  margin:0 auto 24px;
  padding:24px;
  border:2px solid #111827;
  border-radius:28px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  box-shadow:0 20px 48px rgba(15,23,42,0.10);
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(360px,1.1fr);
  gap:24px;
  align-items:center;
}

.home-profile-flex-copy{min-width:0;}

.home-profile-flex-kicker{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  margin-bottom:14px;
  border-radius:999px;
  border:1px solid #7c3aed;
  background:#f5f3ff;
  color:#6d28d9;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
}

.home-profile-flex-title{
  margin:0;
  font-size:clamp(28px,4vw,42px);
  line-height:1.04;
  color:#0f172a;
}

.home-profile-flex-sub{
  margin:14px 0 0;
  font-size:17px;
  line-height:1.65;
  color:#334155;
  max-width:680px;
}

.home-profile-flex-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:20px;
}

.home-profile-flex-stat{
  padding:16px;
  border:1.5px solid #0f172a;
  border-radius:18px;
  background:#ffffff;
}

.home-profile-flex-stat-label{
  display:block;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#475569;
  margin-bottom:8px;
}

.home-profile-flex-stat strong{
  font-size:28px;
  line-height:1;
  color:#0f172a;
}

.home-profile-flex-points{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.home-profile-flex-point{
  padding:13px 16px;
  border:1.5px solid #0f172a;
  border-radius:16px;
  background:#ffffff;
  color:#0f172a;
  font-size:15px;
  line-height:1.5;
}

.home-profile-flex-ctas{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}

.home-profile-flex-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 18px;
  border-radius:999px;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
  border:1.5px solid #0f172a;
}

.home-profile-flex-btn-primary{
  background:#0f172a;
  color:#fff;
}

.home-profile-flex-btn-secondary{
  background:#fff;
  color:#0f172a;
}

.home-profile-flex-visual{min-width:0;}

.home-profile-flex-profile-card{
  padding:18px;
  border:2px solid #111827;
  border-radius:24px;
  background:radial-gradient(circle at top,#0f172a 0%,#09101d 100%);
  box-shadow:0 18px 40px rgba(2,6,23,.22);
}

.home-profile-flex-profile-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.home-profile-flex-profile-kicker{
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  color:#7dd3fc;
  text-transform:uppercase;
}

.home-profile-flex-profile-name{
  margin-top:6px;
  font-size:32px;
  line-height:1;
  font-weight:900;
  color:#fff;
}

.home-profile-flex-profile-handle{
  margin-top:6px;
  font-size:15px;
  color:#93c5fd;
  font-weight:700;
}

.home-profile-flex-level{
  flex:0 0 auto;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-weight:900;
  font-size:13px;
}

.home-profile-flex-brand-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.home-profile-flex-brand-row span{
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#e2e8f0;
  font-size:12px;
  font-weight:800;
}

.home-profile-flex-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}

.home-profile-flex-item{
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
}

.home-profile-flex-item img{
  display:block;
  width:100%;
  height:190px;
  object-fit:cover;
  background:#fff;
}

.home-profile-flex-item-featured{
  grid-column:span 2;
}

.home-profile-flex-item-featured img{
  height:250px;
}

.home-profile-flex-item-meta{
  padding:12px;
}

.home-profile-flex-item-brand{
  display:block;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  color:#67e8f9;
  text-transform:uppercase;
  margin-bottom:6px;
}

.home-profile-flex-item-meta h3{
  margin:0;
  font-size:20px;
  line-height:1.1;
  color:#fff;
}

.home-profile-flex-item-meta p{
  margin:6px 0 0;
  font-size:14px;
  color:#cbd5e1;
}

@media (max-width: 960px){
  .home-profile-flex-section{
    grid-template-columns:1fr;
    padding:20px;
  }
  .home-profile-flex-stats{
    grid-template-columns:1fr 1fr 1fr;
  }
}

@media (max-width: 640px){
  .home-profile-flex-section{
    width:min(100%,calc(100% - 20px));
    margin:0 auto 22px;
    padding:16px;
    border-radius:22px;
    gap:16px;
  }
  .home-profile-flex-title{
    font-size:28px;
  }
  .home-profile-flex-sub{
    font-size:15px;
  }
  .home-profile-flex-stats{
    grid-template-columns:1fr;
  }
  .home-profile-flex-stat strong{
    font-size:24px;
  }
  .home-profile-flex-profile-name{
    font-size:24px;
  }
  .home-profile-flex-grid{
    grid-template-columns:1fr;
  }
  .home-profile-flex-item-featured{
    grid-column:auto;
  }
  .home-profile-flex-item img,
  .home-profile-flex-item-featured img{
    height:200px;
  }
  .home-profile-flex-btn{
    width:100%;
  }
}


/* ========================= */
/* TOP FEATURE SLIDER        */
/* ========================= */
.top-feature-slider{
  width:min(1240px, calc(100% - 24px));
  margin:18px auto 24px;
}

.top-feature-slider-frame{
  position:relative;
  overflow:hidden;
  border-radius:32px;
  min-height:760px;
}

.top-feature-slide{
  display:none;
}

.top-feature-slide.is-active{
  display:block;
  animation:topFeatureFade .35s ease;
}

.top-feature-slide-shell{
  min-height:760px;
  height:760px;
  display:flex;
}

.top-feature-slide .hero,
.top-feature-slide .home-nfc-section,
.top-feature-slide .home-item-profile-section,
.top-feature-slide .home-profile-flex-section{
  width:100% !important;
  margin:0 !important;
  min-height:760px !important;
  height:760px !important;
}

.top-feature-slide .hero{
  border-radius:32px;
}

.top-feature-slide .home-nfc-section,
.top-feature-slide .home-item-profile-section,
.top-feature-slide .home-profile-flex-section{
  border-radius:32px !important;
  box-shadow:none !important;
}

/* make slide content fill equal area cleanly */
.top-feature-slide .hero{
  display:flex;
  align-items:stretch;
}

.top-feature-slide .hero-inner,
.top-feature-slide .home-nfc-copy,
.top-feature-slide .home-item-profile-copy,
.top-feature-slide .home-profile-flex-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.top-feature-slide .home-nfc-section,
.top-feature-slide .home-item-profile-section,
.top-feature-slide .home-profile-flex-section{
  align-items:center;
}

.top-feature-slide .home-nfc-visual,
.top-feature-slide .home-item-profile-visual,
.top-feature-slide .home-profile-flex-visual{
  height:100%;
  display:flex;
  align-items:center;
}

.top-feature-slide .home-nfc-visual img,
.top-feature-slide .home-item-profile-visual img{
  width:100%;
  max-height:680px;
  object-fit:contain;
}

.top-feature-slide .home-profile-flex-item img{
  object-fit:cover;
}

.top-feature-slider-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:14px;
}

.top-feature-arrow{
  width:46px;
  height:46px;
  border-radius:999px;
  border:2px solid #111827;
  background:#ffffff;
  color:#111827;
  font-size:28px;
  line-height:1;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(15,23,42,0.10);
}

.top-feature-arrow:hover{
  background:#111827;
  color:#ffffff;
}

.top-feature-dots{
  display:flex;
  align-items:center;
  gap:10px;
}

.top-feature-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  border:0;
  background:#cbd5e1;
  cursor:pointer;
}

.top-feature-dot.is-active{
  width:42px;
  background:#111827;
}

@keyframes topFeatureFade{
  from{opacity:.55; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}

@media (max-width: 1100px){
  .top-feature-slider-frame{
    min-height:700px;
  }
  .top-feature-slide-shell,
  .top-feature-slide .hero,
  .top-feature-slide .home-nfc-section,
  .top-feature-slide .home-item-profile-section,
  .top-feature-slide .home-profile-flex-section{
    min-height:700px !important;
    height:700px !important;
  }
}

@media (max-width: 900px){
  .top-feature-slider-frame{
    min-height:unset;
  }

  .top-feature-slide-shell{
    min-height:auto;
    height:auto;
  }

  .top-feature-slide .hero,
  .top-feature-slide .home-nfc-section,
  .top-feature-slide .home-item-profile-section,
  .top-feature-slide .home-profile-flex-section{
    min-height:auto !important;
    height:auto !important;
  }

  .top-feature-slide .home-nfc-section,
  .top-feature-slide .home-item-profile-section,
  .top-feature-slide .home-profile-flex-section{
    align-items:stretch;
  }

  .top-feature-slide .home-nfc-visual,
  .top-feature-slide .home-item-profile-visual,
  .top-feature-slide .home-profile-flex-visual{
    height:auto;
  }
}

@media (max-width: 640px){
  .top-feature-slider{
    width:min(100%, calc(100% - 12px));
    margin:12px auto 18px;
  }

  .top-feature-slider-frame{
    border-radius:22px;
  }

  .top-feature-slide .hero,
  .top-feature-slide .home-nfc-section,
  .top-feature-slide .home-item-profile-section,
  .top-feature-slide .home-profile-flex-section{
    border-radius:22px !important;
  }

  .top-feature-slider-nav{
    gap:8px;
    margin-top:10px;
  }

  .top-feature-arrow{
    width:40px;
    height:40px;
    font-size:24px;
  }

  .top-feature-dot.is-active{
    width:30px;
  }
}