/* ===== Content Snare summit — shared brand base ===== */
@font-face{font-family:Masifa;font-weight:400;font-style:normal;src:url(https://contentsnare.com/wp-content/uploads/2021/08/Masifa-Book.woff2);font-display:swap}
@font-face{font-family:Masifa;font-weight:400;font-style:italic;src:url(https://contentsnare.com/wp-content/uploads/2021/08/Masifa-BookIt.woff2);font-display:swap}
@font-face{font-family:Masifa;font-weight:600;font-style:normal;src:url(https://contentsnare.com/wp-content/uploads/2021/08/Masifa-Medium.woff2);font-display:swap}
@font-face{font-family:Masifa;font-weight:700;font-style:normal;src:url(https://contentsnare.com/wp-content/uploads/2021/08/Masifa-Bold.woff2);font-display:swap}
@font-face{font-family:Masifa;font-weight:700;font-style:italic;src:url(https://contentsnare.com/wp-content/uploads/2021/08/Masifa-BoldIt.woff2);font-display:swap}

:root{
  --purple:#703DC1; --purple-700:#412174; --violet:#360484;
  --purple-200:#DFD8F5; --purple-100:#F3EFFE; --purple-50:#F9F8FF;
  --pink:#F04E98; --pink-btn:#E23190; --pink-btn-hover:#C40079;
  --sky:#6AD1E3; --cyan:#68E0FF;
  --ink:#262834; --text:#404040; --muted:#5F6376; --border:#D6D8E2;
  --maxw:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Poppins,system-ui,sans-serif;color:var(--text);line-height:1.6;background:#fff;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.masifa{font-family:Masifa,Poppins,sans-serif;color:var(--violet);line-height:1.18}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-family:Poppins;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--purple)}

/* Buttons: CS pill + pink-arrow-circle motif */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:Poppins;font-weight:600;font-size:16px;
     border:0;border-radius:999px;padding:8px 8px 8px 26px;cursor:pointer;transition:.18s;white-space:nowrap}
.btn.solid{padding:15px 28px}
.btn .arw{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--pink-btn);flex:0 0 40px}
.btn .arw svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.btn-pink{background:var(--pink-btn);color:#fff}
.btn-pink:hover{background:var(--pink-btn-hover)}
.btn-pink .arw{background:rgba(255,255,255,.22)}
.btn-cyan{background:var(--cyan);color:var(--purple-700)}
.btn-cyan:hover{background:#41d4fb}
.btn-violet{background:var(--violet);color:#fff}
.btn-violet:hover{background:#26035e}
.btn-ghost{background:transparent;border:2px solid var(--purple-200);color:var(--violet);padding:13px 26px}
.btn-ghost:hover{border-color:var(--purple)}
.btn-ghost.onpurple{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost.onpurple:hover{border-color:#fff}

/* Nav */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid #eef}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.nav-logo img{height:34px;display:block}
.nav-links{display:flex;gap:28px;font-size:14px;font-weight:500;color:var(--ink)}
.nav-links a:hover{color:var(--purple)}
@media(max-width:820px){.nav-links{display:none}}

/* Footer */
footer{background:#fff;border-top:1px solid #eef;padding:38px 0}
.foot-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-inner img{height:30px}
.foot-links{display:flex;gap:22px;font-size:14px;color:var(--muted)}
.foot-links a:hover{color:var(--purple)}
.foot-copy{font-size:13px;color:var(--muted)}

/* Timezone selector */
.tzbar{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--purple-200);border-radius:999px;padding:8px 8px 8px 18px;font-size:14px;color:var(--muted)}
.tzbar label{font-weight:600;color:var(--ink);white-space:nowrap}
.tzbar select,.tzbar input{font-family:Poppins;font-size:14px;border:0;background:var(--purple-50);border-radius:999px;padding:9px 16px;color:var(--violet);font-weight:600;width:230px;max-width:60vw}
.tzbar input{cursor:text}
.tzbar input::placeholder{color:var(--muted);font-weight:400}
.tzbar select:focus,.tzbar input:focus{outline:2px solid var(--purple-200)}
.tzcombo{position:relative;display:inline-block}
.tzmenu{position:absolute;top:calc(100% + 6px);left:0;min-width:240px;max-height:280px;overflow-y:auto;background:#fff;border:1px solid var(--purple-200);border-radius:14px;box-shadow:0 18px 40px -16px rgba(20,2,60,.35);padding:6px;display:none;z-index:60;text-align:left}
.tzmenu.open{display:block}
.tzmenu button{display:block;width:100%;text-align:left;border:0;background:none;font-family:Poppins;font-size:14px;color:var(--ink);padding:9px 12px;border-radius:9px;cursor:pointer;white-space:nowrap}
.tzmenu button:hover{background:var(--purple-50);color:var(--purple)}
.tzmenu .empty{padding:10px 12px;color:var(--muted);font-size:13px}
/* Below ~520px the label + 230px input + gutters exceed the viewport and push the page 12px wide.
   Let the pill stack so nothing overflows horizontally. */
@media(max-width:520px){
  .tzbar{flex-wrap:wrap;justify-content:center;gap:6px;padding:12px 14px;width:100%}
  .tzbar label{width:100%;text-align:center}
  .tzbar select,.tzbar input{width:100%;max-width:none}
  .tzcombo{width:100%}
  .tzmenu{min-width:0;width:100%}
}

/* Mockup banner */
.note{padding:12px 24px;font-size:12px;color:#cbb8f5;text-align:center;background:#26035e;font-family:Poppins}
.note b{color:#fff}