/* =========================================================
   The Local Band List — V17.17 Signature Music UI
   Distinctive music-community information architecture and original branding.
   ========================================================= */
:root{
  --bg:#f0f2f5!important;
  --panel:#ffffff!important;
  --panel2:#f7f8fa!important;
  --text:#1c1e21!important;
  --muted:#65676b!important;
  --line:#dfe3e8!important;
  --accent:#2f6fed!important;
  --accent2:#4f8cff!important;
  --good:#198754!important;
  --danger:#d93025!important;
  --blue:#2f6fed!important;
  --shadow:0 1px 2px rgba(0,0,0,.08),0 6px 18px rgba(0,0,0,.04)!important;
}
*{box-sizing:border-box}
html{background:#f0f2f5;color-scheme:light}
body{
  background:#f0f2f5!important;
  color:#1c1e21!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-size:14px;
  line-height:1.45;
}
a{color:#2f6fed}
h1,h2,h3,h4,h5,h6{color:#1c1e21;letter-spacing:-.018em}
h1{font-size:clamp(26px,3vw,36px)!important;line-height:1.12!important}
h2{font-size:clamp(20px,2.4vw,28px)!important;line-height:1.16!important}
h3{font-size:17px!important;line-height:1.25!important}
p,li{font-size:14px}
small,.muted,.m,.helper,.sectionnote,.homemeta,.c-muted,.c-meta{color:#65676b!important}

/* ----- universal app bar for non-Community pages ----- */
.tll-appbar-spacer{height:62px}
.tll-appbar{
  position:fixed;left:0;right:0;top:0;z-index:99998;height:62px;
  background:#fff;border-bottom:1px solid #dfe3e8;box-shadow:0 1px 4px rgba(0,0,0,.08);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.tll-appbar-inner{height:100%;max-width:1460px;margin:auto;padding:0 18px;display:flex;align-items:center;gap:14px}
.tll-appbrand{display:flex;align-items:center;gap:9px;color:#172033!important;text-decoration:none!important;font-weight:900;font-size:16px;white-space:nowrap}
.tll-appbrand-mark{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#2f6fed;color:#fff;font-size:18px;box-shadow:0 2px 8px rgba(47,111,237,.24)}
.tll-appbar-search{min-width:170px;max-width:270px;flex:0 1 270px;height:40px;border-radius:22px;background:#f0f2f5;color:#65676b!important;display:flex;align-items:center;padding:0 14px;text-decoration:none!important;font-size:13px}
.tll-appbar-nav{display:flex;align-items:center;justify-content:center;gap:4px;flex:1}
.tll-appbar-nav a{min-width:78px;padding:10px 12px;border-radius:9px;color:#51565d!important;text-decoration:none!important;text-align:center;font-size:13px;font-weight:700}
.tll-appbar-nav a:hover{background:#f0f2f5;color:#2f6fed!important}
.tll-appbar-account{display:flex;align-items:center;gap:7px;margin-left:auto}
.tll-appbar-chip{display:inline-flex;align-items:center;gap:6px;background:#f0f2f5;color:#263238!important;border:0;border-radius:20px;padding:9px 12px;text-decoration:none!important;font-weight:750;font-size:12px;white-space:nowrap}
.tll-appbar-chip:hover{background:#e4e6eb}
.tll-appbar-chip.primary{background:#e7f0ff;color:#245fd2!important}
.tll-appbar-chip.logout{background:#fff0f0;color:#b42318!important}

/* ----- common containers/cards ----- */
.shell,.s,.box,.c-shell{color:#1c1e21}
.card,.c,.box,.panel,.rulebox,.pricecard,.suggestBox,.gigFinder,.artistLoginCallout,.membership,.deletionWarning,.homeartist,.gigcard,.stat,.metric,.mediaItem,.tablewrap,.login,.dialog,.dashboard,.main,.side,.uploadbox{
  background:#fff!important;
  color:#1c1e21!important;
  border-color:#dfe3e8!important;
  box-shadow:0 1px 2px rgba(0,0,0,.06)!important;
}
.card,.c,.rulebox,.pricecard,.suggestBox,.gigFinder,.artistLoginCallout,.membership,.deletionWarning,.gigcard,.homeartist{border-radius:12px!important}
.card,.c{padding:16px!important}
.section{padding:42px 0!important}
.section:nth-of-type(even){background:#f6f7f9}
.sectionhead{margin-bottom:16px!important}
.sectionhead h2{margin-bottom:5px!important}
.sectionhead p,.suggestIntro,.artistLoginCallout p{color:#65676b!important;line-height:1.55!important}

/* ----- buttons ----- */
.btn,.c-btn,button.btn,a.btn{
  border:1px solid #d8dde4!important;background:#eef0f3!important;color:#1c1e21!important;
  border-radius:8px!important;padding:9px 13px!important;min-height:auto;font-size:13px!important;font-weight:750!important;
  box-shadow:none!important;transform:none!important;
}
.btn:hover,.c-btn:hover,button.btn:hover,a.btn:hover{background:#e4e6eb!important;filter:none!important;transform:none!important}
.btn.primary,.c-btn.primary,.primary.btn,.launchApply{
  background:#2f6fed!important;border-color:#2f6fed!important;color:#fff!important;
}
.btn.primary:hover,.c-btn.primary:hover,.launchApply:hover{background:#245fd2!important;border-color:#245fd2!important}
.btn.good,.c-btn.good{background:#e9f7ef!important;border-color:#b8dfc7!important;color:#12643c!important}
.btn.bad,.c-btn.bad,.btn.danger,.c-btn.danger{background:#fff0f0!important;border-color:#f2c4c0!important;color:#b42318!important}
.btn.ghost{background:transparent!important}

/* ----- forms ----- */
label{color:#4b4f56!important;font-size:12px!important;font-weight:700!important}
input,select,textarea,.dialog input,.dialog select,.dialog textarea,.gigFinderForm input,.suggestBox input,.suggestBox select,.suggestBox textarea{
  background:#fff!important;color:#1c1e21!important;border:1px solid #ccd2da!important;border-radius:8px!important;
  padding:10px 11px!important;box-shadow:none!important;
}
input:focus,select:focus,textarea:focus{outline:0!important;border-color:#2f6fed!important;box-shadow:0 0 0 3px rgba(47,111,237,.12)!important}
::placeholder{color:#8a8d91!important}

/* ----- tables / admin ----- */
table{background:#fff!important;color:#1c1e21!important}
th{background:#f7f8fa!important;color:#4f545c!important;border-color:#e2e5e9!important;font-size:12px!important}
td{border-color:#e6e9ed!important;font-size:12.5px!important}
.stat,.metric{background:#fff!important}
.num,.metric b{color:#172033!important}
.badge,.tag,.status{box-shadow:none!important}
.warning,.warn{background:#fff8df!important;color:#755b00!important;border-color:#ead88f!important}
.ok,.saveNotice,.membership.active{background:#eef9f2!important;color:#12643c!important;border-color:#b7dfc6!important}
.bad,.membership.urgent,.deletionWarning,.dangerZone{background:#fff1f1!important;color:#8e2119!important;border-color:#efc0bc!important}

/* ----- global floating helper from older markup, if any survives ----- */
.tll-global-navhelper{display:none!important}

/* ----- homepage ----- */
body>nav{background:#fff!important;border-bottom:1px solid #dfe3e8!important;box-shadow:0 1px 4px rgba(0,0,0,.06)!important;backdrop-filter:none!important}
.navin{height:62px!important;min-height:62px!important}
.brand{color:#172033!important;font-size:17px!important}
.logo{width:38px!important;height:38px!important;border-radius:50%!important;background:#2f6fed!important;color:#fff!important;box-shadow:none!important}
.brand span[style]{color:#172033!important}
.navlinks{gap:6px!important}
.navlinks a{color:#555b63!important;padding:9px 10px;border-radius:8px;font-size:13px!important;font-weight:700}
.navlinks a:hover{background:#f0f2f5;color:#2f6fed!important}
.actions{gap:7px!important}
.communityTopBar{background:#f7f9fc!important;border-bottom:1px solid #e3e7ed!important}
.communityTopBarInner{min-height:42px!important}
.communityTopLabel{color:#59616b!important;font-size:12px!important;font-weight:650!important}
.communityTopLabel strong{color:#245fd2!important}
.communityTopBar .communityLoginTop,.communityTopBar .communityCreateTop{background:#e7f0ff!important;border-color:#d2e2ff!important;color:#245fd2!important}
.communityTopBar .communityCreateTop{background:#2f6fed!important;border-color:#2f6fed!important;color:#fff!important}
.supportTopBar{background:#fff8dd!important;border-top:1px solid #f0df9f!important}
.supportTopLink{color:#715a00!important}
.supportTopLink .supportIcon,.supportNewWord{background:#f5c842!important;color:#3e3300!important}

.hero{padding:26px 0 34px!important;min-height:0!important;display:block!important;align-items:initial!important;background:#f0f2f5!important;color:#1c1e21!important}
.hero:before{display:none!important}
.hero:after{display:none!important}
.hero .shell{background:#fff;border:1px solid #e0e3e8;border-radius:16px;padding:28px!important;box-shadow:0 1px 2px rgba(0,0,0,.06)!important;overflow:hidden;position:relative}
.hero .shell:after{content:"";position:absolute;right:0;top:0;width:42%;height:190px;background:linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,.05)),url('main-bg.jpg') center/cover no-repeat;opacity:.42;pointer-events:none}
.hero .shell>*{position:relative;z-index:1}
.hero .eyebrow{display:inline-flex!important;background:#eef4ff!important;border:1px solid #d6e4ff!important;color:#2f63bd!important;padding:6px 9px!important;border-radius:16px!important;font-size:10px!important;font-weight:800!important}
.hero h1{max-width:760px!important;margin:13px 0 10px!important;font-size:clamp(34px,5vw,54px)!important;color:#172033!important;text-shadow:none!important}
.hero h1 .grad{background:none!important;-webkit-text-fill-color:initial!important;color:#2f6fed!important}
.hero>div>p,.hero p{max-width:820px!important;color:#5f6368!important;font-size:14px!important;line-height:1.55!important;text-shadow:none!important}
.heroPurpose{margin-top:18px!important;background:#f7f8fa!important;border:1px solid #e1e4e8!important;border-radius:12px!important;padding:15px!important;box-shadow:none!important}
.heroPurpose h2{font-size:18px!important;margin:0 0 4px!important}
.heroPurposeIcon,.heroBenefitIcon{background:#e7f0ff!important;color:#245fd2!important;border-color:#d5e3fa!important}
.heroPurposeIntro,.heroBenefit span,.heroPurposeCta{color:#65676b!important;font-size:12.5px!important}
.heroBenefit{background:#fff!important;border:1px solid #e4e7eb!important;border-radius:9px!important;padding:10px!important}
.heroPurposeCta{background:transparent!important;border-top:1px solid #e1e4e8!important;padding-top:12px!important}
.heroPurposeCta b{color:#1c1e21!important}
.searchbar,.searchbar5{margin-top:18px!important;background:#fff!important;border:1px solid #d7dce3!important;box-shadow:0 1px 2px rgba(0,0,0,.04)!important;border-radius:10px!important;padding:6px!important}
.field{border-color:#e1e4e8!important}
.field span{color:#5d6773!important}
.searchbar input,.searchbar select,.searchbar5 input,.searchbar5 select{background:#fff!important;color:#1c1e21!important;border:0!important;box-shadow:none!important;font-size:13px!important}
.searchbar button,.searchbar5 button{background:#2f6fed!important;color:#fff!important;border-radius:8px!important;font-size:13px!important}
.hero .mini{color:#747980!important;font-size:11px!important;text-shadow:none!important}
.hero .stats{gap:8px!important;margin-top:14px!important}
.hero .stat{background:#f7f8fa!important;border-color:#e3e6ea!important;border-radius:9px!important;padding:11px!important}
.hero .stat b{color:#30343b!important;font-size:13px!important}.hero .stat span{color:#6c7178!important;font-size:11px!important}

.foundingLaunchBanner{background:#fff!important;color:#1c1e21!important;border-color:#e0e4e8!important;padding:18px 0!important}
.foundingLaunchInner{background:#fff8dc!important;border:1px solid #edda91!important;border-radius:12px!important;padding:18px!important}
.foundingLaunchBadge{background:#f5c842!important;color:#483a00!important}
.foundingLaunchBanner p{color:#5c5640!important;font-size:13px!important}
.foundingLaunchBanner .remain{color:#695400!important}
.communityGateway{background:#f0f2f5!important;border-color:#e0e3e8!important;padding:16px 0!important}
.communityGatewayInner{background:#fff!important;border-color:#dfe3e8!important;border-radius:14px!important;padding:20px!important;box-shadow:0 1px 2px rgba(0,0,0,.06)!important}
.communityGateway h2{font-size:26px!important}.communityGateway p{color:#65676b!important;font-size:13px!important}.communityGateway p b{color:#1c1e21!important}
.communityGateway .communityPill{background:#eef4ff!important;border-color:#d7e4fb!important;color:#245fd2!important;font-size:10px!important}
.communityGatewaySafety{background:#f7f8fa!important;border-color:#e2e5e9!important;border-radius:10px!important}.communityGatewaySafety b{color:#1c1e21!important}.communityGatewaySafety ul{color:#62676d!important;font-size:12px!important}
.homeartist{overflow:hidden!important}.homebody{padding:12px!important}.homename{font-size:16px!important}.homephoto{background:#edf0f3!important}.featuredVideoPanel{background:#f7f8fa!important;border-color:#e1e4e8!important}.featuredVideoLabel{color:#4d535a!important}.featuredVideoLabel span{color:#245fd2!important}.featuredVideoButtons button{background:#fff!important;color:#3d4248!important;border-color:#d8dde4!important}.featuredVideoHint{color:#747980!important}
.gigFinder{background:#fff!important}.gigFinderTop p,.gigFinderExample{color:#65676b!important}
.suggestBox{background:#fff!important}.artistLoginCallout{background:#fff!important}
footer{background:#fff!important;border-color:#dfe3e8!important;color:#65676b!important;padding:26px 0 40px!important}footer b,footer span{color:#1c1e21!important}footer a{color:#4267a9!important}
.modal{background:rgba(25,30,38,.5)!important}.dialog{background:#fff!important;color:#1c1e21!important}.dialog p{color:#65676b!important}.dialog h3{font-size:22px!important}
.notice{background:#fff!important;color:#1c1e21!important;border:1px solid #dfe3e8!important}
.genrePicker{background:#f7f8fa!important;border-color:#dfe3e8!important}.genrePick{background:#fff!important;border-color:#dfe3e8!important}.genrePick:has(input:checked){background:#e7f0ff!important;border-color:#8ab3ff!important;color:#245fd2!important}.genreHelp{color:#65676b!important}

/* ----- artist dashboard/profile/search common cleanup ----- */
.top{margin-bottom:14px!important}.top h1{margin-bottom:4px!important}.mediaItem{background:#f8f9fa!important}.membership{background:#fffdf4!important}.dashboard{background:#fff!important}.side{background:#f7f8fa!important}.menu button{color:#555b63!important}.menu button.active,.menu button:hover{background:#e7f0ff!important;color:#245fd2!important}.main{background:#fff!important}.uploadbox{background:#f8f9fa!important;color:#65676b!important;border-color:#cfd5dc!important}

/* ----- Mobile ----- */
@media(max-width:980px){
  .tll-appbar-search{display:none}
  .tll-appbar-nav a{min-width:auto;padding:9px 10px}
  .tll-appbar-nav a span.tll-navlabel{display:none}
}
@media(max-width:760px){
  body{font-size:14px!important}
  .tll-appbar-spacer{height:58px}.tll-appbar{height:58px}.tll-appbar-inner{padding:0 9px;gap:7px}.tll-appbrand{font-size:0}.tll-appbrand-mark{width:36px;height:36px}.tll-appbar-nav{gap:1px}.tll-appbar-nav a{font-size:18px;padding:8px 10px}.tll-appbar-account .tll-appbar-chip:not(.logout){display:none}.tll-appbar-chip.logout{padding:8px 10px;font-size:11px}
  .hero{padding:12px 0 20px!important}.hero .shell{width:calc(100% - 16px)!important;padding:17px!important;border-radius:12px!important}.hero .shell:after{display:none}.hero h1{font-size:34px!important}.hero p{font-size:13px!important}.heroPurposeGrid{grid-template-columns:1fr!important}.hero .stats{grid-template-columns:1fr!important}
  .communityTopBarInner{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;padding:6px 0!important}.communityTopLabel{display:none!important}.communityTopBar .btn{width:auto!important;flex:1 1 42%;font-size:11px!important;padding:8px!important}
  .navin{height:58px!important;min-height:58px!important}.brand{font-size:15px!important}.navin .actions .btn{font-size:11px!important;padding:8px 9px!important}.navlinks{display:none!important}
  .card,.c{padding:13px!important}.section{padding:30px 0!important}
}
/* Community admin/legal pages that use the universal app bar instead of the Community header */
body.community-body:has(.tll-appbar){padding-top:0!important}

/* =========================================================
   V17.17 — The Local Band List Signature Music UI
   Familiar social usability, distinctly TLL visual identity.
   ========================================================= */
:root{
  --bg:#f5f3ef!important;
  --panel:#fffefa!important;
  --panel2:#f8f5ef!important;
  --text:#1f252d!important;
  --muted:#68717b!important;
  --line:#e3ded5!important;
  --accent:#173a5e!important;
  --accent2:#d7a32d!important;
  --blue:#1f7a78!important;
  --shadow:0 8px 24px rgba(31,37,45,.065)!important;
}
html{background:#f5f3ef}
body{background:#f5f3ef!important;color:#1f252d!important}
a{color:#1b6570}
h1,h2,h3,h4,h5,h6{color:#202832}

/* Signature app bar: venue-pass branding rather than social-network blue. */
.tll-appbar{height:66px;background:rgba(255,254,250,.97);border-bottom:1px solid #e5dfd5;box-shadow:0 5px 18px rgba(31,37,45,.055)}
.tll-appbar-spacer{height:66px}
.tll-appbar-inner{max-width:1500px;padding:0 22px;gap:16px}
.tll-appbrand{color:#172f47!important;font-size:16px;letter-spacing:-.02em}
.tll-appbrand-mark{
  width:42px;height:38px;border-radius:10px 4px 10px 4px;background:#173a5e;color:#f4c658;
  border:1px solid #0e2b48;box-shadow:inset -7px 0 0 #d7a32d,0 4px 12px rgba(23,58,94,.14);font-size:19px;
}
.tll-appbar-search{background:#f3efe7;color:#6d7278!important;border:1px solid #e7e0d4;border-radius:12px;height:39px}
.tll-appbar-nav{gap:8px}
.tll-appbar-nav a{color:#56616b!important;border-radius:10px;position:relative}
.tll-appbar-nav a:hover{background:#fbf3dc;color:#173a5e!important}
.tll-appbar-nav a:hover:after{content:"";position:absolute;left:20%;right:20%;bottom:3px;height:2px;background:#d7a32d;border-radius:4px}
.tll-appbar-chip{background:#f3efe7;color:#34404b!important;border:1px solid #e4ddd1;border-radius:10px}
.tll-appbar-chip:hover{background:#eee8dc}
.tll-appbar-chip.primary{background:#173a5e;color:#fff!important;border-color:#173a5e}
.tll-appbar-chip.logout{background:#fff8f6;color:#a23a31!important;border-color:#efd5cf}

/* Homepage main navigation keeps the same signature identity. */
body>nav{background:rgba(255,254,250,.97)!important;border-bottom:1px solid #e3ddd2!important;box-shadow:0 5px 18px rgba(31,37,45,.05)!important}
.navin{height:66px!important;min-height:66px!important}
.brand{color:#172f47!important;font-size:18px!important}
.logo{width:42px!important;height:38px!important;border-radius:10px 4px 10px 4px!important;background:#173a5e!important;color:#f4c658!important;box-shadow:inset -7px 0 0 #d7a32d!important}
.navlinks a{color:#58636d!important;border-radius:10px!important}
.navlinks a:hover{background:#fbf3dc!important;color:#173a5e!important}
.communityTopBar{background:#fbf8f2!important;border-bottom:1px solid #e9e2d7!important}
.communityTopLabel{color:#666d73!important}.communityTopLabel strong{color:#1f7a78!important}
.communityTopBar .communityLoginTop{background:#f2f6f5!important;border-color:#cfe0dd!important;color:#176663!important}
.communityTopBar .communityCreateTop{background:#173a5e!important;border-color:#173a5e!important;color:#fff!important}

/* Keep the original photo-led homepage hero — it is the site's signature billboard. */
.hero{
  padding:88px 0 58px!important;position:relative!important;overflow:hidden!important;isolation:isolate!important;
  min-height:610px!important;display:flex!important;align-items:flex-end!important;background:#0c1117!important;color:#fff!important;
}
.hero:before{
  display:block!important;content:""!important;position:absolute!important;inset:0!important;
  background:url('main-bg.jpg') center 10%/cover no-repeat!important;opacity:1!important;z-index:-3!important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 66%,rgba(0,0,0,.88) 82%,rgba(0,0,0,.2) 100%)!important;
  mask-image:linear-gradient(to bottom,#000 0%,#000 66%,rgba(0,0,0,.88) 82%,rgba(0,0,0,.2) 100%)!important;
}
.hero:after{
  display:block!important;content:""!important;position:absolute!important;inset:0!important;z-index:-2!important;
  background:linear-gradient(to bottom,rgba(7,13,19,.05) 0%,rgba(7,13,19,.12) 38%,rgba(7,13,19,.63) 75%,rgba(7,13,19,.98) 100%),linear-gradient(90deg,rgba(7,13,19,.38) 0%,rgba(7,13,19,.05) 52%,rgba(7,13,19,.12) 100%)!important;
}
.hero .shell{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;overflow:visible!important;position:relative!important}
.hero .shell:after{display:none!important}
.hero .eyebrow{display:inline-flex!important;background:rgba(28,121,117,.14)!important;border:1px solid rgba(102,224,214,.45)!important;color:#b9fff6!important;padding:7px 11px!important;border-radius:999px!important;font-size:11px!important;letter-spacing:.075em!important}
.hero h1{max-width:980px!important;margin:20px 0 16px!important;font-size:clamp(52px,7.4vw,86px)!important;line-height:.94!important;color:#79f2ee!important;letter-spacing:-.06em!important;text-shadow:0 5px 24px rgba(0,0,0,.9)!important}
.hero h1 .grad{background:linear-gradient(90deg,#f4c658,#ff9851 76%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important;filter:drop-shadow(0 4px 10px rgba(0,0,0,.75))!important}
.hero .heroLead{max-width:870px!important;color:#f7f8fb!important;font-size:17px!important;line-height:1.58!important;font-weight:650!important;text-shadow:0 2px 12px rgba(0,0,0,.9)!important}
.heroPrimaryAction{margin-top:18px}
.heroJoinButton{background:#f2bf3b!important;border-color:#f2bf3b!important;color:#17212b!important;font-size:14px!important;padding:12px 18px!important;border-radius:10px!important;box-shadow:0 10px 25px rgba(0,0,0,.25)!important}
.heroJoinButton:hover{background:#ffd46a!important;border-color:#ffd46a!important}
/* The detailed explainer now lives in the join cards below; keep the hero uncluttered like the original. */
.heroPurpose{display:none!important}
.hero .searchbar,.hero .searchbar5{margin-top:28px!important;background:rgba(255,255,255,.97)!important;border:1px solid rgba(255,255,255,.5)!important;box-shadow:0 14px 36px rgba(0,0,0,.28)!important;border-radius:13px!important}
.hero .searchbar button,.hero .searchbar5 button{background:#173a5e!important;color:#fff!important}
.hero .mini{color:#e2e6ea!important;font-size:11.5px!important;text-shadow:0 3px 12px rgba(0,0,0,.95)!important}
.hero .stats{gap:10px!important;margin-top:28px!important}
.hero .stat{background:rgba(10,16,23,.63)!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:12px!important;backdrop-filter:blur(7px)!important}
.hero .stat b{color:#fff!important}.hero .stat span{color:#d0d5db!important}

/* Join paths — clear business/community split immediately under the hero. */
.joinPaths{padding:38px 0;background:#f5f3ef;border-bottom:1px solid #e7e0d5}
.joinPathsIntro{text-align:center;max-width:760px;margin:0 auto 20px}
.joinKicker{display:inline-block;color:#8b6815;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px}
.joinPathsIntro h2{margin:0 0 7px;font-size:30px!important}.joinPathsIntro p{margin:0;color:#68717b;font-size:13px}
.joinPathGrid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.joinPathCard{position:relative;display:grid;grid-template-columns:58px 1fr;gap:15px;padding:20px;background:#fffefa;border:1px solid #e2ddd4;border-radius:16px;box-shadow:0 8px 22px rgba(31,37,45,.055);overflow:hidden}
.joinPathCard:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:#d7a32d}
.joinPathCard.communityPath:before{background:#1f7a78}
.joinPathIcon{width:54px;height:54px;border-radius:14px 5px 14px 5px;display:grid;place-items:center;background:#173a5e;color:#fff;font-size:24px;box-shadow:inset -8px 0 0 rgba(215,163,45,.9)}
.communityPath .joinPathIcon{background:#1f6568;box-shadow:inset -8px 0 0 rgba(99,202,194,.65)}
.joinPathLabel{font-size:9px;font-weight:900;letter-spacing:.12em;color:#927021}.communityPath .joinPathLabel{color:#1f716f}
.joinPathCard h3{margin:3px 0 6px;font-size:20px!important}.joinPathCard p{margin:0;color:#68717b;font-size:12.5px;line-height:1.55}
.joinPathActions{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}

/* Distinctive light cards throughout the public site. */
.card,.c,.box,.panel,.rulebox,.pricecard,.suggestBox,.gigFinder,.artistLoginCallout,.membership,.deletionWarning,.homeartist,.gigcard,.stat,.metric,.mediaItem,.tablewrap,.login,.dialog,.dashboard,.main,.side,.uploadbox{
  background:#fffefa!important;border-color:#e2ddd4!important;box-shadow:0 7px 20px rgba(31,37,45,.05)!important;
}
.card,.c,.rulebox,.pricecard,.suggestBox,.gigFinder,.artistLoginCallout,.membership,.deletionWarning,.gigcard,.homeartist{border-radius:15px!important}
.section:nth-of-type(even){background:#faf8f4!important}
.btn,.c-btn,button.btn,a.btn{background:#f1ede6!important;border-color:#dfd8cc!important;color:#29343e!important;border-radius:9px!important}
.btn:hover,.c-btn:hover,button.btn:hover,a.btn:hover{background:#eae3d8!important}
.btn.primary,.c-btn.primary,.primary.btn,.launchApply{background:#173a5e!important;border-color:#173a5e!important;color:#fff!important}
.btn.primary:hover,.c-btn.primary:hover,.launchApply:hover{background:#102e4a!important;border-color:#102e4a!important}
input:focus,select:focus,textarea:focus{border-color:#1f7a78!important;box-shadow:0 0 0 3px rgba(31,122,120,.12)!important}

.foundingLaunchBanner{background:#f5f3ef!important;color:#1f252d!important;border-color:#e5dfd5!important}
.foundingLaunchInner{background:linear-gradient(120deg,#fff5cf,#fffaf0)!important;border:1px solid #e6cb78!important;border-radius:16px!important;box-shadow:0 8px 20px rgba(92,71,19,.06)!important}
.foundingLaunchBadge{background:#173a5e!important;color:#ffe59f!important}
.foundingLaunchBanner .launchApply{background:#173a5e!important;color:#fff!important;border-color:#173a5e!important}

.communityGateway{background:#f5f3ef!important;border-color:#e5dfd5!important}
.communityGatewayInner{background:linear-gradient(135deg,#fffefa 0%,#f4faf8 100%)!important;border:1px solid #d9e1dc!important;border-radius:17px!important;box-shadow:0 8px 22px rgba(31,37,45,.05)!important}
.communityGateway .communityPill{background:#e9f5f2!important;border-color:#bfded8!important;color:#176c69!important}
.communityGatewaySafety{background:#fbfaf6!important;border-color:#e4ded3!important;border-radius:13px!important}

.homeartist{border-top:3px solid #d7a32d!important;transition:transform .18s ease,box-shadow .18s ease!important}
.homeartist:hover{transform:translateY(-3px)!important;box-shadow:0 14px 32px rgba(31,37,45,.10)!important}
.homephoto{background:#eee9df!important}.homebody{padding:13px!important}
.planpill{background:#fff3c7!important;color:#795900!important;border:1px solid #eed68c}.planpill.featured{background:#edf5f3!important;color:#176864!important;border-color:#c9dfda}.planpill.founding{background:#fff3c7!important;color:#795900!important}
.featuredVideoPanel{background:#f8f5ef!important;border-color:#e5dfd5!important}.featuredVideoLabel span{color:#876312!important}.featuredVideoButtons button{border-radius:8px!important}

.genre{background:#fffefa!important;border:1px solid #e2ddd4!important;color:#27313a!important;border-radius:15px!important;box-shadow:0 6px 16px rgba(31,37,45,.04)!important;position:relative;overflow:hidden}
.genre:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#d7a32d;opacity:.8}
.genre:hover,.genre.active{border-color:#d8bd72!important;background:#fffaf0!important;transform:translateY(-2px)!important}.genre span{color:#68717b!important}

footer{background:#172f47!important;border-color:#172f47!important;color:#ccd5dd!important}footer b,footer span{color:#fff!important}footer a{color:#f0cb6d!important}

@media(max-width:760px){
  .tll-appbar-spacer{height:60px}.tll-appbar{height:60px}.tll-appbrand-mark{width:38px;height:35px}
  .hero{padding:62px 0 35px!important;min-height:590px!important}.hero .shell{width:calc(100% - 22px)!important;padding:0!important}.hero h1{font-size:48px!important}.hero .heroLead{font-size:14px!important}.hero .stats{grid-template-columns:1fr!important}.hero .searchbar,.hero .searchbar5{padding:6px!important}
  .joinPathGrid{grid-template-columns:1fr}.joinPathCard{grid-template-columns:48px 1fr;padding:16px}.joinPathIcon{width:45px;height:45px;font-size:20px}
}

/* =========================================================
   V17.23 — Site-wide Mobile Hardening
   Final responsive layer. Intentionally loaded last so page-specific
   desktop layouts cannot override phone/tablet behavior.
   ========================================================= */
@media (max-width: 900px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  body{min-width:0!important}
  *,*::before,*::after{min-width:0}
  img,video,audio,iframe,canvas,svg{max-width:100%!important;height:auto}
  iframe{width:100%!important}
  pre,code{max-width:100%;white-space:pre-wrap!important;overflow-wrap:anywhere!important;word-break:break-word}

  /* Universal content containers */
  .shell,.s,.box,.wrap,.container,.content,.page,.c-shell,
  main.shell,main.s,main.box,main.c-shell{
    width:calc(100% - 20px)!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  /* Any common desktop grid becomes one readable column */
  .grid,.dashboard,.homegrid,.artistgrid,.genregrid,.giggrid,.spotlightgrid,
  .joinPathGrid,.plans,.pricing,.rules,.flow,.stats,.metrics,.settings,.statgrid,
  .formgrid,.mediaGrid,.suggestGrid,.gigFinderForm,.profileHero,.heroCard,.artistHero,
  .c-grid,.c-inbox,.c-roomgrid,.c-membergrid,.c-admin-grid,.c-switchgrid,.c-side-stat{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .wide,[style*="grid-column"]{grid-column:auto!important}

  /* Flex rows should wrap instead of forcing horizontal overflow */
  .row,.top,.toprow,.toolbar,.actions,.homeactions,.sectionhead,.gigFinderTop,
  .c-row,.c-between,.joinPathActions,.statusline,.bar{
    flex-wrap:wrap!important;
    max-width:100%!important;
  }
  .c-between{display:flex!important;flex-direction:column!important;align-items:stretch!important}
  .c-between>*{max-width:100%!important}

  /* Forms and controls */
  input,select,textarea,button{max-width:100%!important}
  input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%!important;font-size:16px!important}
  .btn,.c-btn,button,a.btn{max-width:100%}
  .c-form .c-row>label,.c-row>label[style*="flex"]{flex:1 1 100%!important;width:100%!important}
  .c-search{display:grid!important;grid-template-columns:1fr!important}
  .c-search .c-btn,.c-search button{width:100%!important}

  /* Tables stay usable without widening the whole page */
  .tablewrap,.c-tablewrap{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  table,.c-table{width:100%!important;max-width:none!important}
  table[style*="min-width"],.c-table{min-width:640px!important}

  /* Community: force true single-column phone/tablet layout */
  body.community-body{padding-top:58px!important;overflow-x:hidden!important}
  .community-body.c-has-leftnav .c-shell,
  .community-body .c-shell{
    width:calc(100% - 16px)!important;
    max-width:760px!important;
    margin:0 auto!important;
    padding:10px 0 64px!important;
  }
  .community-body.c-has-leftnav .c-footer,.community-body .c-footer{margin-left:0!important}
  .c-leftnav{display:none!important}
  .c-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  .c-grid>*{width:100%!important;max-width:100%!important;min-width:0!important}
  .c-card{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}
  .c-roomgrid,.c-membergrid,.c-admin-grid,.c-switchgrid,.c-side-stat{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
  .c-inbox{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
  .c-threadlist,.c-dmthread,.c-chat{width:100%!important;max-width:100%!important}
  .c-media,.c-chatline .c-media,.c-chatline .c-media-gate{max-width:100%!important}
  .c-media img,.c-media video{width:100%!important;height:auto!important;max-height:70vh!important;object-fit:contain}

  /* Community header: compact, centered, no off-screen account column */
  .c-nav{
    height:58px!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    gap:5px!important;
    padding:0 6px!important;
  }
  .c-nav-left{gap:4px!important}.c-navsearch{display:none!important}
  .c-brand{font-size:0!important}.c-brandmark{width:36px!important;height:34px!important;font-size:16px!important}
  .c-navicons{width:100%!important;max-width:100%!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:0!important}
  .c-navicons a{min-width:0!important;padding:5px 2px!important;font-size:16px!important}
  .c-navicons a span{display:none!important}
  .c-navaccount{gap:3px!important}.c-navprofile{display:none!important}.c-navround{width:34px!important;height:34px!important;font-size:14px!important}
  .c-navaccount .c-btn{padding:7px 7px!important;font-size:10px!important;white-space:nowrap!important}

  /* Universal non-community app bar */
  .tll-appbar,.tll-appbar-spacer{height:58px!important}
  .tll-appbar-inner{padding:0 7px!important;gap:4px!important;max-width:100%!important}
  .tll-appbrand{font-size:0!important;flex:0 0 auto!important}.tll-appbrand-mark{width:35px!important;height:35px!important}
  .tll-appbar-search{display:none!important}
  .tll-appbar-nav{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:0!important;min-width:0!important}
  .tll-appbar-nav a{min-width:0!important;padding:8px 3px!important;font-size:17px!important;white-space:nowrap!important}
  .tll-appbar-nav .tll-navlabel{display:none!important}
  .tll-appbar-account{flex:0 0 auto!important;gap:3px!important}
  .tll-appbar-account .tll-appbar-chip:not(.logout){display:none!important}
  .tll-appbar-chip.logout{padding:7px 7px!important;font-size:10px!important;white-space:nowrap!important}

  /* Artist dashboard/admin: sidebar becomes content section, never side-by-side */
  .dashboard{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important}
  .side{width:100%!important;border-right:0!important;border-bottom:1px solid var(--line)!important;position:static!important;max-height:none!important}
  .main{width:100%!important;padding:14px!important;overflow:hidden!important}
  .menu{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important}
  .menu button,.menu a{width:100%!important;white-space:normal!important}

  /* Modal/dialog safety */
  .modal,.dialogwrap{padding:10px!important}
  .dialog,.modal .card,.modal .box{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;max-height:88vh!important;overflow:auto!important}

  /* Embedded email/preview content */
  .emailFrame,.preview iframe{width:100%!important;min-width:0!important;max-width:100%!important}
}

@media (max-width: 560px){
  body{font-size:14px!important}
  .shell,.s,.box,.wrap,.container,.content,.page,.c-shell,
  main.shell,main.s,main.box,main.c-shell{width:calc(100% - 14px)!important}
  .community-body.c-has-leftnav .c-shell,.community-body .c-shell{width:calc(100% - 12px)!important}
  .card,.c,.box,.panel,.c-card,.membership,.rulebox,.pricecard,.suggestBox,.gigFinder{padding:12px!important;border-radius:12px!important}
  h1{font-size:26px!important;line-height:1.12!important}h2{font-size:21px!important}h3{font-size:16px!important}
  p,li{font-size:13.5px!important}
  .menu{grid-template-columns:minmax(0,1fr)!important}
  .top>div:last-child,.top .actions{width:100%!important}
  .top>div:last-child .btn,.top .actions .btn{flex:1 1 100%!important;text-align:center!important}
  .c-tabs{display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch;padding-bottom:6px!important}
  .c-tabs a{white-space:nowrap!important;flex:0 0 auto!important}
  .c-chat{height:58vh!important;min-height:320px!important}.c-dmthread{height:56vh!important;min-height:320px!important}
  .c-bubble{max-width:92%!important}
  .joinPathCard{grid-template-columns:42px minmax(0,1fr)!important;gap:10px!important;padding:13px!important}
  .joinPathIcon{width:40px!important;height:40px!important;font-size:18px!important}
  .hero .searchbar,.hero .searchbar5{width:100%!important}
  table[style*="min-width"],.c-table{min-width:580px!important}
}