/* Adapted from the operator-selected 02-bento-glass.html on RedMonster. */
#landing{
  --bg: #f3f4f7;
  --card: #ffffff;
  --card-alt: #f8f9fb;
  --text: #14171f;
  --muted: #667085;
  --border: rgba(20, 23, 31, 0.08);
  --emerald: #10b981;
  --emerald-soft: #e6f8f1;
  --coral: #f43f5e;
  --coral-soft: #ffe8ec;
  --amber: #f59e0b;
  --amber-soft: #fef3c7;
  --shadow: 0 14px 34px rgba(15, 23, 42, 0.05), 0 2px 6px rgba(15, 23, 42, 0.03);
  --radius-xl: 26px;
  --radius-lg: 18px;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#landing *{ box-sizing: border-box; }
#landing{
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
#landing a{ color: inherit; text-decoration: none; }
#landing button{ font: inherit; cursor: pointer; }
#landing .wrap{
  width: calc(100% - 40px);
  max-width: 1180px;
  margin: 0 auto;
}
#landing .top-header{
  padding: 20px 0;
}
#landing .pill-nav{
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 14px 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: var(--shadow);
}
#landing .brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
}
#landing .brand-dot{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--text);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
}
#landing .nav-cta{
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--text);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: transform 0.15s;
}
#landing .nav-cta:hover{ transform: scale(1.02); }
#landing .hero{
  padding: 36px 0 32px;
  text-align: center;
}
#landing .badge-soft{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  margin-bottom: 18px;
}
#landing .badge-soft span{
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--emerald-soft);
  color: #067647;
  font-weight: 600;
  font-size: 11px;
}
#landing .hero h1{
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  max-width: 760px;
  margin: 0 auto 16px;
}
#landing .hero p{
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto 26px;
}
#landing .hero-btns{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
#landing .btn-dark{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  background: var(--text);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 10px 24px rgba(20, 23, 31, 0.18);
}
#landing .btn-light{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 24px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  box-shadow: var(--shadow);
}
#landing .bento{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  padding: 16px 0 48px;
}
#landing .b-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 26px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#landing .col-7{ grid-column: span 7; }
#landing .col-5{ grid-column: span 5; }
#landing .col-4{ grid-column: span 4; }
#landing .col-8{ grid-column: span 8; }
#landing .b-head h2{
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
#landing .b-head p{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
#landing .funnel-box{
  background: var(--card-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#landing .funnel-stage{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--border);
}
#landing .f-avatars{
  display: flex;
  align-items: center;
}
#landing .f-avatars i{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin-right: -6px;
  border: 2px solid #fff;
}
#landing .f-pill{
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
#landing .f-pill.green{ background: var(--emerald-soft); color: #067647; }
#landing .f-pill.red{ background: var(--coral-soft); color: #be123c; }
#landing .toggle-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#landing .toggle-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card-alt);
  border-radius: 14px;
  border: 1px solid var(--border);
}
#landing .t-user{
  display: flex;
  align-items: center;
  gap: 10px;
}
#landing .t-ava{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
}
#landing .t-user b{ display: block; font-size: 13.5px; }
#landing .t-user small{ font-size: 11.5px; color: var(--muted); }
#landing .ios-switch{
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #d0d5dd;
  border: 0;
  position: relative;
  transition: background 0.2s;
  padding: 0;
}
#landing .ios-switch::after{
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
  transition: transform 0.2s;
}
#landing .ios-switch[aria-pressed="true"]{
  background: var(--emerald);
}
#landing .ios-switch[aria-pressed="true"]::after{
  transform: translateX(20px);
}
#landing .portrait-pills{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
#landing .p-box{
  background: var(--card-alt);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}
#landing .p-box small{
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 6px;
}
#landing .p-box strong{
  font-size: 20px;
  font-weight: 700;
}
#landing .progress-multi{
  height: 8px;
  border-radius: 999px;
  background: #e4e7ec;
  overflow: hidden;
  display: flex;
  margin-top: 8px;
}
#landing .mini-dash{
  background: var(--card-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}
#landing .dash-toolbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
#landing .seg-control{
  display: inline-flex;
  background: #e9ecf1;
  padding: 3px;
  border-radius: 10px;
}
#landing .seg-btn{
  border: 0;
  background: transparent;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
#landing .seg-btn.active{
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
#landing .dash-bars{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  align-items: end;
  height: 110px;
  padding-top: 12px;
}
#landing .bar-col{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}
#landing .bar-pair{
  display: flex;
  align-items: flex-end;
  gap: 4px;
  width: 100%;
  justify-content: center;
  height: 82px;
}
#landing .b-join{
  width: 10px;
  background: var(--emerald);
  border-radius: 4px 4px 2px 2px;
  transition: height 0.25s;
}
#landing .b-ban{
  width: 10px;
  background: var(--coral);
  border-radius: 4px 4px 2px 2px;
  transition: height 0.25s;
}
#landing .bar-col small{
  font-size: 11px;
  color: var(--muted);
}
#landing .faq-section{
  padding: 20px 0 60px;
}
#landing .faq-section h2{
  text-align: center;
  font-size: 28px;
  margin: 0 0 24px;
}
#landing .faq-cards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
#landing .faq-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  box-shadow: var(--shadow);
}
#landing .faq-card summary{
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
#landing .faq-card p{
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
#landing .footer{
  padding: 28px 0 92px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 960px){#landing .col-7,#landing .col-5,#landing .col-4,#landing .col-8{ grid-column: span 12; }
#landing .faq-cards{ grid-template-columns: 1fr; }}
@media (max-width: 560px){#landing .wrap{ width: calc(100% - 24px); }
#landing .portrait-pills{ grid-template-columns: 1fr; }}
#landing .demo-style-1{font-size:14px;display:block;}
#landing .demo-style-2{color:var(--muted);font-size:12px;}
#landing .demo-style-3{background:#3b82f6;}
#landing .demo-style-4{background:#10b981;}
#landing .demo-style-5{background:#f59e0b;}
#landing .demo-style-6{background:#8b5cf6;}
#landing .demo-style-7{background:var(--emerald-soft);color:#067647;}
#landing .demo-style-8{background:var(--amber-soft);color:#b45309;}
#landing .demo-style-9{background:var(--coral-soft);color:#be123c;}
#landing .demo-style-10{width:34%;background:var(--amber);}
#landing .demo-style-11{width:88%;background:var(--emerald);}
#landing .demo-style-12{grid-column:span 2;}
#landing .demo-style-13{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-top:4px;}
#landing .demo-style-14{color:var(--muted);}
#landing .demo-style-15{width:48%;background:#ec4899;}
#landing .demo-style-16{width:39%;background:#3b82f6;}
#landing .demo-style-17{font-size:13px;font-weight:600;}
#landing .demo-style-18{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--emerald);margin-right:4px;}
#landing .demo-style-19{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--coral);margin:0 4px 0 14px;}
#landing .demo-style-20{height:54px}
#landing .demo-style-21{height:18px}
#landing .demo-style-22{height:68px}
#landing .demo-style-23{height:22px}
#landing .demo-style-24{height:46px}
#landing .demo-style-25{height:14px}
#landing .demo-style-26{height:78px}
#landing .demo-style-27{height:28px}
#landing .demo-style-28{height:62px}
#landing .demo-style-29{height:19px}
#landing .demo-style-30{height:50px}
#landing .demo-style-31{height:15px}
#landing .demo-style-32{height:72px}
#landing .demo-style-33{height:21px}

/* Production layout, accessibility and the matching cabinet. */
:root{--bg:#f3f4f7;--paper:#fff;--ink:#14171f;--muted:#667085;--line:rgba(20,23,31,.08);--blue:#14171f;--soft-blue:#e6f8f1;--green:#067647;--red:#be123c;--radius:18px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
#landing{overflow-x:visible;line-height:1.55}
#landing .brand{letter-spacing:-.3px;white-space:nowrap}
#landing .brand-dot{flex:none}
#landing .brand:hover{color:var(--text)}
#landing .nav-cta:hover,#landing .btn-dark:hover{color:#fff;background:#292e39}
#landing .btn-light:hover{background:var(--card-alt);color:var(--text)}
#landing .hero h1{letter-spacing:-.025em}
#landing .badge-soft{flex-wrap:wrap;justify-content:center}
#landing .b-card{min-width:0}
#landing .b-head h2{line-height:1.25}
#landing .funnel-stage>div:first-child{min-width:0}
#landing .f-avatars{flex:none}
#landing .f-pill{flex:none;text-align:center;max-width:100%}
#landing .toggle-row{border:1px solid var(--border);font-size:inherit}
#landing .t-user{min-width:0}
#landing .t-user>div:last-child{min-width:0}
#landing .t-user b{overflow-wrap:anywhere}
#landing .t-ava,#landing .ios-switch{flex:none}
#landing .ios-switch:before{content:"";position:absolute;inset:-9px 0}
#landing .t-state{display:block;line-height:1.4}
#landing .example-label{font-size:11px;font-weight:500;color:var(--muted);margin:0 0 10px}
#landing .portrait-pills{margin-top:auto}
#landing .portrait-pills .p-box:last-child{grid-column:1/-1}
#landing .gender-labels{display:flex;gap:8px;flex-wrap:wrap}
#landing .faq-section{display:block;border:0;padding:20px 0 60px}
#landing .faq-section h2{font-size:28px;margin:0 0 24px}
#landing .faq-cards{align-items:start}
#landing .faq-card{padding:18px 22px;border:1px solid var(--border)}
#landing .faq-card p{padding:0;margin:10px 0 0}
#landing .faq-card:last-child{grid-column:1/-1}
#landing .footer{padding:28px 0 36px}
#landing .seg-btn{min-height:36px}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline-color:#10b981}
#cabinet .app-header{height:auto;min-height:60px;margin-top:20px;padding:10px 20px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);box-shadow:0 14px 34px #0f172a0d,0 2px 6px #0f172a08}
.brand-icon{background:#14171f;border-radius:10px;width:30px;height:30px;font-size:23px}
.button{border-radius:999px}
.button.primary:hover{background:#292e39}
#cabinet .dashboard{padding-top:34px}
#cabinet .overview{grid-template-columns:repeat(3,minmax(0,1fr));border:0;padding:0;gap:14px;margin-top:24px}
#cabinet .overview small span{display:inline;font-size:inherit;min-height:0}
#cabinet .overview>div,#cabinet .overview>div:first-child{border:1px solid var(--line);padding:20px 22px;background:#fff;border-radius:22px;box-shadow:0 8px 24px #0f172a06}
#cabinet .overview strong{font-weight:650;letter-spacing:-1px}
#total-joins{color:#067647}
#total-blocked{color:#be123c}
#total-failed{color:#b45309}
#cabinet .chart{padding:24px;background:#fff;border:1px solid var(--line);border-radius:22px;margin:18px 0 0}
#cabinet .chart-bars{height:78px;gap:8px}
#cabinet .chart-day{gap:4px}
#cabinet .chart-day .joins,#cabinet .chart-legend em:before{background:#10b981}
#cabinet .chart-day .blocked,#cabinet .chart-legend em:last-child:before{background:#f43f5e}
#cabinet .chart-legend{font-size:11px;margin-top:14px}
#cabinet .analytics{margin:10px 0 24px}
#cabinet .analytics>summary{font-size:13px;min-height:44px}
#cabinet .analytics[open]{background:#fff;border:1px solid var(--line);border-radius:22px;padding:10px 22px;margin-top:18px}
#cabinet #analytics-content{border:0}
#cabinet .track i{background:#10b981}
#cabinet .activity{background:#fff;border:1px solid var(--line);border-radius:26px;padding:22px 26px;box-shadow:0 14px 34px #0f172a05}
#cabinet .event:hover{background:#f8f9fb}
#cabinet .person-avatar{background:#e6f8f1;color:#067647}
#cabinet .event-label.blocked{color:#be123c}
#cabinet .event-label.failed,#cabinet .event-label.retry{color:#b45309}
#cabinet .search,#cabinet select{border-radius:12px}
#cabinet .search:focus-within{outline-color:#10b981}
#cabinet .periods{background:#e9ecf1;border-radius:12px}
#cabinet .periods button{border-radius:9px;min-height:38px}
#cabinet .event{border-radius:10px}
#cabinet .app-footer{border:0}
#cabinet .notice{background:#fff;border-color:var(--line);color:var(--muted);border-radius:14px}
#cabinet .notice.error{background:#fff1f0;color:#9d4d46}
#sheet{border-radius:26px;box-shadow:0 24px 80px #0f172a26}
#sheet .switch input:checked+span{background:#10b981}
#sheet .switch input:focus-visible+span{outline-color:#10b981}
#sheet .toggle-row{padding:16px;background:#f8f9fb;border:1px solid var(--line);border-radius:14px}
#sheet .exception-row{padding-inline:8px}
#sheet .switch{width:46px;height:26px}
#sheet .switch span{height:26px}
#sheet .switch span:after{width:20px;height:20px}
#sheet .switch input:checked+span:after{transform:translateX(20px)}
@media(max-width:960px){#landing .col-7,#landing .col-5,#landing .col-4,#landing .col-8{grid-column:span 12}#landing .portrait-pills{grid-template-columns:1fr 1fr}}
@media(max-width:700px){
 #cabinet .wrap{width:calc(100% - 24px)}
 #cabinet .app-header{margin-top:12px;padding:10px 14px;gap:8px}
 #cabinet .dashboard{padding-top:26px}
 #cabinet .page-heading{align-items:center;gap:10px}
 #cabinet .page-heading h1{font-size:27px}
 #cabinet .page-heading .button{font-size:12px;min-height:42px;padding:9px 12px}
 #cabinet .overview{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 #cabinet .overview>div,#cabinet .overview>div:first-child{padding:16px 10px;border-radius:18px}
 #cabinet .overview span{font-size:11px;min-height:0}
 #cabinet .overview strong{font-size:24px;margin-top:8px}
 #cabinet .overview small:empty{display:none}
 #cabinet .chart{padding:18px;border-radius:18px}
 #cabinet .chart-bars{height:60px;gap:4px}
 #cabinet .chart-day{gap:2px}
 #cabinet .chart-legend{font-size:10px}
 #cabinet .activity{padding:16px;border-radius:22px}
 #cabinet .event{gap:8px}
 #cabinet .event-end{max-width:44%}
 #cabinet .analytics[open]{padding:8px 16px}
}
@media(max-width:560px){
 #landing .pill-nav{gap:8px;padding:10px 12px}
 #landing .brand{gap:7px;font-size:14px}
 #landing .brand-dot{width:27px;height:27px;border-radius:8px}
 #landing .nav-cta{font-size:12px;padding:10px 12px;text-align:center}
 #landing .hero{padding:24px 0 24px}
 #landing .hero h1{font-size:34px;line-height:1.14}
 #landing .hero p{font-size:15px;line-height:1.6}
 #landing .badge-soft{font-size:12px;gap:5px 8px;padding:7px 12px}
 #landing .hero-btns{gap:10px}
 #landing .btn-dark,#landing .btn-light{justify-content:center;width:100%;padding:14px 18px;font-size:14px;min-height:48px}
 #landing .bento{gap:14px;padding-bottom:36px}
 #landing .b-card{padding:20px;border-radius:22px}
 #landing .b-head h2{font-size:19px}
 #landing .b-head p{font-size:13px;margin-bottom:16px}
 #landing .funnel-box{padding:10px;gap:8px}
 #landing .funnel-stage{flex-wrap:wrap;padding:12px;gap:8px}
 #landing .funnel-stage>div:first-child{flex-basis:100%}
 #landing .f-pill{font-size:11px}
 #landing .f-avatars{margin-right:auto}
 #landing .toggle-row{padding:12px 10px;gap:8px}
 #landing .t-user{gap:8px}
 #landing .t-user b{font-size:12px}
 #landing .t-user small{font-size:11px}
 #landing .t-ava{width:30px;height:30px;font-size:12px}
 #landing .portrait-pills{grid-template-columns:1fr 1fr;gap:8px}
 #landing .p-box{padding:12px}
 #landing .p-box small{font-size:11px}
 #landing .mini-dash{padding:12px}
 #landing .dash-bars{gap:5px}
 #landing .dash-legend{font-size:12px;display:flex;flex-wrap:wrap;gap:6px 10px}
 #landing .faq-section{padding:10px 0 36px}
 #landing .faq-section h2{font-size:25px}
 #landing .faq-card{padding:16px 18px}
 #landing .faq-card summary{font-size:14px}
 #landing .faq-card p{font-size:13px}
}
@media(max-width:360px){#landing .nav-cta{font-size:11px;padding:9px 10px;max-width:116px}#landing .brand{font-size:13px}#landing .brand-dot{width:24px;height:26px}#landing .hero h1{font-size:30px}#landing .b-card{padding:16px}#landing .t-ava{display:none}#cabinet .activity{padding:14px}#cabinet .page-heading h1{font-size:24px}}
@media(prefers-reduced-motion:reduce){#landing *,#landing *:before,#landing *:after{transition:none!important;animation:none!important}}

#landing .nav-mobile{display:none}
#landing .nav-cta{white-space:nowrap}
@media(max-width:560px){#landing .nav-mobile{display:inline}#landing .nav-desktop{display:none}}

/* Themes and quiet live activity. */
.theme-toggle{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--secondary-border);border-radius:12px;background:var(--secondary-bg);color:var(--ink);line-height:1}.theme-toggle svg{display:block;width:20px;height:20px}
#landing .nav-actions{display:flex;align-items:center;gap:8px}
#landing .theme-toggle{color:var(--text)}
#cabinet #billing{font-size:12px;white-space:nowrap;color:var(--ink)}
.person-avatar{position:relative;overflow:hidden}.person-avatar img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;border-radius:50%}
.live-status{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:8px;min-height:18px}
.live-beacon{width:6px;height:6px;flex:none;border-radius:50%;background:#98a2b3}
.live-status[data-state=live] .live-beacon{background:#10b981;box-shadow:0 0 0 3px #10b98120;animation:ncb-beacon 2.8s ease-out infinite}
.live-status[data-state=live] #live-label{color:#067647}
.live-status[data-state=loading] .live-beacon{background:#f59e0b}
.live-status[data-state=offline] .live-beacon{background:#f43f5e}

#cabinet .event.event-new{animation:ncb-new-row 8s ease-out}
@keyframes ncb-beacon{0%,70%,100%{box-shadow:0 0 0 3px #10b98120}35%{box-shadow:0 0 0 6px #10b98108}}
@keyframes ncb-new-row{0%,40%{background:#10b9811c}100%{background:transparent}}
.billing-head{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:16px;background:var(--bg);border-radius:16px;margin-bottom:18px}.billing-head strong{display:block;font-size:23px}.billing-head small{color:var(--muted);font-size:11px}.billing-head a{font-size:12px;text-decoration:underline}
.plan-state{font-size:13px;line-height:1.6;margin:0 0 18px;color:var(--muted)}
.plan-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}.plan-option{border:1px solid var(--line);border-radius:14px;padding:11px 8px;background:var(--paper);color:var(--ink);font-size:12px}.plan-option strong{display:block;font-size:19px;margin-top:4px}.plan-option small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.plan-option[aria-pressed=true]{border-color:#10b981;background:#10b98112;box-shadow:0 0 0 1px #10b981}
.payment-methods{display:grid;grid-template-columns:1fr 1fr;gap:8px}.payment-methods .button{font-size:12px;padding:11px 10px;gap:5px}.payment-methods .button:disabled{cursor:not-allowed;opacity:.55}
.billing-disclosure{margin-top:24px;border-top:1px solid var(--line);padding-top:18px;font-size:13px}.billing-disclosure summary{cursor:pointer;font-weight:600}.referral-copy{font-size:12px;line-height:1.6;color:var(--muted);margin:12px 0}.referral-link{display:flex;gap:8px;align-items:center}.referral-link input{min-width:0;flex:1;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;padding:10px;font-size:11px}.referral-link .button{font-size:12px;padding:10px 12px}.billing-history{list-style:none;margin:12px 0 0;padding:0}.billing-history li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12px}.billing-history small{display:block;color:var(--muted)}
#landing .pricing-section{padding:10px 0 48px}#landing .pricing-section h2{font-size:28px;margin:14px 0 12px;text-align:center}#landing .pricing-section>div:first-child{text-align:center}#landing .pricing-section p{font-size:14px;line-height:1.65;color:var(--muted);max-width:680px;margin:0 auto}#landing .pricing-badge{display:inline-block;padding:5px 12px;background:var(--emerald-soft);color:#067647;border-radius:30px;font-size:12px;font-weight:600}#landing .pricing-options{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:24px 0 16px}#landing .pricing-options>div{padding:18px 12px;border-radius:18px;border:1px solid var(--border);background:var(--card);text-align:center}#landing .pricing-options b{font-size:12px;font-weight:500}#landing .pricing-options strong{display:block;font-size:23px;margin-top:6px}#landing .pricing-options small{display:block;font-size:11px;color:#067647;margin-top:4px}#landing .pricing-note{text-align:center;font-size:12px!important}
html[data-theme=dark]{color-scheme:dark;--bg:#101319;--paper:#1a2029;--ink:#edf1f7;--muted:#a0aabd;--line:#ffffff14;--blue:#edf1f7;--soft-blue:#10b98118;--green:#50d9ad;--red:#fb8ba0}
html[data-theme=dark] #landing{--bg:#101319;--card:#1a2029;--card-alt:#141a22;--text:#edf1f7;--muted:#a0aabd;--border:#ffffff14;--emerald:#28c995;--emerald-soft:#0e3b30;--coral:#fb7185;--coral-soft:#482332;--amber:#e7aa39;--amber-soft:#49391c;--shadow:0 14px 34px #00000026,0 2px 6px #00000012}
html[data-theme=dark] #landing .pill-nav{background:#1a2029dc}
html[data-theme=dark] #landing .badge-soft,html[data-theme=dark] #landing .funnel-stage,html[data-theme=dark] #landing .btn-light,html[data-theme=dark] #landing .faq-card{background:var(--card)}
html[data-theme=dark] #landing .nav-cta,html[data-theme=dark] #landing .btn-dark{background:#edf1f7;color:#14171f}
html[data-theme=dark] #landing .nav-cta:hover,html[data-theme=dark] #landing .btn-dark:hover{background:#cfd9e7;color:#14171f}
html[data-theme=dark] #landing .brand-dot{background:#2a3341}
html[data-theme=dark] #landing .f-pill.green,html[data-theme=dark] #landing .badge-soft span,html[data-theme=dark] #landing .pricing-badge{color:#6ee7bf}
html[data-theme=dark] #landing .f-pill.red{color:#fda4b3}
html[data-theme=dark] #landing .pricing-options small{color:#6ee7bf}
html[data-theme=dark] #landing .seg-control{background:#101319}
html[data-theme=dark] #landing .seg-btn.active{background:#2a3341;color:#edf1f7}
html[data-theme=dark] #landing .progress-multi{background:#2a3341}
html[data-theme=dark] #landing .ios-switch{background:#465063}
html[data-theme=dark] #landing .ios-switch[aria-pressed=true]{background:#10b981}
html[data-theme=dark] #landing .t-ava{color:#edf1f7}
html[data-theme=dark] #landing .f-avatars i{border-color:#1a2029}
html[data-theme=dark] #cabinet .overview>div,html[data-theme=dark] #cabinet .overview>div:first-child,html[data-theme=dark] #cabinet .chart,html[data-theme=dark] #cabinet .activity,html[data-theme=dark] #cabinet .analytics[open],html[data-theme=dark] #cabinet .notice,html[data-theme=dark] #sheet{background:var(--paper)}
html[data-theme=dark] select,html[data-theme=dark] .search,html[data-theme=dark] input,html[data-theme=dark] #sheet .toggle-row{background-color:#141a22;color:var(--ink)}
html[data-theme=dark] .button{border-color:var(--line);color:var(--ink);background:var(--paper)}
html[data-theme=dark] .button:hover{background:#293343}
html[data-theme=dark] .button.primary{background:#edf1f7;color:#14171f}
html[data-theme=dark] #cabinet .periods{background:#1a2029}
html[data-theme=dark] #cabinet .periods button[aria-pressed=true]{background:#303b4d;color:#edf1f7}
html[data-theme=dark] #cabinet .event:hover{background:#222b38}
html[data-theme=dark] #cabinet .person-avatar{background:#0e3b30;color:#6ee7bf}
html[data-theme=dark] #total-joins,html[data-theme=dark] .live-status[data-state=live] #live-label{color:#6ee7bf}
html[data-theme=dark] #total-blocked,html[data-theme=dark] #cabinet .event-label.blocked{color:#fda4b3}
html[data-theme=dark] #total-failed,html[data-theme=dark] #cabinet .event-label.failed,html[data-theme=dark] #cabinet .event-label.retry{color:#fcd58a}
html[data-theme=dark] .dist-row .track{background:#293343}
html[data-theme=dark] .coverage,html[data-theme=dark] .event-time{color:#a0aabd}
html[data-theme=dark] .sheet-error,html[data-theme=dark] #cabinet .notice.error{background:#482332;color:#fecdd7}
html[data-theme=dark] dialog::backdrop{background:#0009}
@media(max-width:700px){#landing .pricing-options{grid-template-columns:repeat(3,1fr)}#cabinet #billing{font-size:11px;padding:8px 5px}.account{gap:3px}#cabinet .app-header .brand{font-size:13px;gap:6px}#cabinet .app-header .brand-icon{width:25px;height:28px}.live-status{font-size:10px;gap:6px}#landing .nav-actions{gap:6px}#landing .brand{font-size:13px}#landing .brand-dot{width:24px;height:26px}}
@media(max-width:380px){#cabinet #billing{max-width:48px;white-space:normal;line-height:1.2}#landing .nav-cta{padding:9px 10px}#landing .pill-nav{padding:10px}#landing .nav-actions{gap:4px}}
@media(prefers-reduced-motion:reduce){.live-beacon,#cabinet .event.event-new{animation:none!important}.event-new{border-left:2px solid #10b981!important}}

.billing-head>div{min-width:0}.billing-head .tariff-remaining{flex:none;text-align:right}.billing-head .tariff-remaining strong{white-space:nowrap;color:var(--green)}.payment-methods .button:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:360px){.billing-head{gap:12px}.billing-head strong{font-size:18px}.billing-head small{font-size:10px}}

.event-label.unpaid{color:var(--muted)}

/* Personal watchlist: one entry point, one list, one person's history. */
#cabinet .overview>.watch-card{appearance:none;font:inherit;text-align:left;color:var(--ink);border:1px solid var(--line);padding:20px 22px;background:var(--paper,#fff);border-radius:22px;cursor:pointer;box-shadow:0 8px 24px #0f172a06}
#cabinet .watch-card:hover{border-color:#10b981}#cabinet .watch-card:focus-visible{outline:2px solid #10b981;outline-offset:3px}
#cabinet .watch-card>span{display:block}#cabinet .watch-card strong{display:block;color:#067647}#cabinet .watch-card small{display:block;color:var(--muted)}.watch-card i{font-style:normal;float:right}
.watch-list{margin:0 -6px}.watch-person{display:flex;align-items:center;gap:12px;width:100%;padding:14px 6px;background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--line);border-radius:10px;text-align:left;cursor:pointer;font:inherit}
.watch-person:hover,.person-log-row:hover{background:#10b9810a}.watch-person-main{flex:1;min-width:0}.watch-person-main strong{display:block;font-size:14px;overflow-wrap:anywhere}.watch-person-main small{display:block;font-size:11px;color:var(--muted);margin-top:4px}.watch-last{display:block;font-size:11px;color:var(--muted);margin-top:7px}.watch-arrow{color:var(--muted);font-size:22px}
#sheet .watch-person .person-avatar{width:40px;height:40px;flex:none;background:#10b98116;color:#067647}.person-toolbar{display:flex;justify-content:space-between;gap:8px;margin-bottom:22px}
.person-heading{display:flex;align-items:center;gap:14px;margin-bottom:18px;min-width:0;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--secondary-bg)}.person-heading>div{min-width:0}.person-heading strong{display:block;font-size:19px;overflow-wrap:anywhere}.person-heading a{display:block;font-size:12px;color:var(--muted);margin-top:5px}.person-heading small{display:block;font-size:11px;color:var(--muted);margin-top:5px}.person-heading .person-avatar{width:50px;height:50px;flex:none;background:#10b98116;color:#067647}
.person-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:20px;gap:8px}.person-totals>div{padding:12px 10px;border:1px solid var(--line);border-radius:12px}.person-totals strong{display:block;font-size:22px;font-weight:600}.person-totals small{display:block;font-size:10px;color:var(--muted);margin-top:4px}
.person-log-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;margin:26px 0 12px}.person-log-heading h3{font-size:14px}.person-log-heading small{font-size:10px;color:var(--muted)}.person-log{margin-bottom:18px;border:1px solid var(--line);border-radius:14px;overflow:hidden}.person-log-row{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:64px;padding:14px;background:none;color:var(--ink);border:0;text-align:left;cursor:pointer;font:inherit}.person-log-row:nth-child(odd){background:var(--secondary-bg)}.person-log-row:hover{background:var(--secondary-hover)}.person-log-row>span{min-width:0}.person-log-row strong{display:block;font-size:12px;font-weight:500;overflow-wrap:anywhere}.person-log-row small{display:block;font-size:11px;color:var(--muted);margin-top:5px;overflow-wrap:anywhere}.person-log-row time{flex:none;font-size:11px;color:var(--muted);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.person-log-row time span{display:block}.person-log-row time span+span{margin-top:4px}
html[data-theme=dark] #cabinet .watch-card{background:#1a2029}html[data-theme=dark] #cabinet .watch-card strong,html[data-theme=dark] #sheet .person-avatar{color:#6ee7bf}
@media(max-width:700px){#cabinet .overview>.watch-card{padding:15px 10px;border-radius:16px}#cabinet .watch-card>span{font-size:11px;min-height:0;line-height:1.4}#cabinet .watch-card strong{font-size:24px;margin-top:8px}#cabinet .watch-card small{font-size:9px;line-height:1.4;margin-top:7px}.person-log-row{gap:8px}.person-heading strong{font-size:17px}}

/* Shared controls: one geometry for secondary actions, navigation and icon buttons. */
:root{--secondary-bg:#f1f3f6;--secondary-hover:#e7ebf1;--secondary-border:#d4dae3}
html[data-theme=dark]{--secondary-bg:#242d39;--secondary-hover:#303c4b;--secondary-border:#455164}
#cabinet .text-button,#cabinet .button:not(.primary),#cabinet .analytics>summary,dialog .button:not(.primary),dialog .text-button,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px;border:1px solid var(--secondary-border);border-radius:12px;background:var(--secondary-bg);color:var(--ink);font-size:13px;font-weight:550;line-height:1.4;text-decoration:none;box-shadow:none;cursor:pointer}
@media(hover:hover){#cabinet .text-button:hover,#cabinet .button:not(.primary):hover,#cabinet .analytics>summary:hover,dialog .button:not(.primary):hover,dialog .text-button:hover,.icon-button:hover{background:var(--secondary-hover);border-color:var(--secondary-border);color:var(--ink)}}
.icon-button{flex:none;width:44px;height:44px;padding:0}.icon-button svg{display:block;width:20px;height:20px;flex:none}
#cabinet .analytics{margin-top:14px}#cabinet .analytics>summary{list-style:none;justify-content:space-between;gap:18px}#cabinet .analytics>summary::-webkit-details-marker{display:none}#cabinet .analytics>summary>span{font-size:17px;line-height:1;transition:transform .15s}#cabinet .analytics[open]>summary>span{transform:rotate(180deg)}
.person-toolbar{flex-wrap:wrap;align-items:center;margin-bottom:20px}
.watch-control{display:flex;align-items:stretch;gap:8px;width:100%}.watch-control .watch-toggle{flex:1;min-width:0;width:auto}
#sheet .watch-help{flex:none;width:44px;min-height:44px;padding:0;font-size:16px}
#sheet .watch-toggle[aria-pressed=true]{background:#e6f8f1;border-color:#9ecfbc;color:#075b3b}
html[data-theme=dark] #sheet .watch-toggle[aria-pressed=true]{background:#193b32;border-color:#356654;color:#90e5c5}
dialog{max-height:85dvh;overscroll-behavior:contain}dialog .sheet-head{position:sticky;top:-26px;padding-block:8px;background:var(--paper);z-index:2}
#watch-help-dialog{border-radius:26px;background:var(--paper);color:var(--ink);box-shadow:0 24px 80px #0f172a26}#watch-help-dialog .sheet-head h2{font-size:21px}.watch-help-copy p{font-size:13px;line-height:1.65;color:var(--muted);margin:0 0 17px}.watch-help-copy b{font-weight:600;color:var(--ink)}#watch-help-dialog .button{width:100%;margin-top:4px}
#cabinet .account .text-button{padding:10px;font-size:12px;white-space:nowrap}#cabinet .account{gap:6px}
#cabinet select{min-height:46px;padding-block:11px;font-size:14px;line-height:22px}#cabinet .search{min-height:46px}
@media(max-width:700px){
 dialog .sheet-head{top:-23px}
 #cabinet .feed-controls input,#cabinet .feed-controls select,#cabinet #channel{font-size:16px}
 #cabinet .app-header{border-radius:20px;flex-wrap:wrap;padding:12px}
 #cabinet .app-header .brand{min-height:36px}
 #cabinet .account{margin-left:auto}
 #cabinet #billing{max-width:none;white-space:nowrap;line-height:1.4}
 #cabinet .theme-toggle{width:44px;height:44px}
 #cabinet .activity-heading{align-items:flex-start;gap:12px}
 #cabinet .activity-heading .text-button{font-size:12px;padding:10px;flex:none}
 #cabinet .periods button{min-height:44px}
}
@media(max-width:360px){#cabinet .analytics>summary{font-size:12px;padding-inline:12px;gap:12px}.watch-control .watch-toggle{font-size:13px;padding-inline:8px}}

#cabinet .chart-bars{padding-top:21px;height:99px}#cabinet .chart-day{position:relative;cursor:pointer;outline-offset:4px}#cabinet .chart-day>i{position:relative;font-style:normal}.bar-value{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:10px;line-height:16px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}#cabinet .chart-day .joins .bar-value{color:var(--green)}#cabinet .chart-day .blocked .bar-value{color:var(--red)}.chart-detail{font-size:11px;line-height:1.5;color:var(--muted);margin-top:14px;min-height:17px}.chart-selected{background:#10b98112;border-radius:4px}.chart-month .bar-value{display:none}.chart-month .chart-selected .bar-value{display:block;padding:0 3px;background:var(--paper);z-index:1}.chart-month .chart-selected .joins .bar-value{transform:translateX(-100%)}.chart-month .chart-selected .blocked .bar-value{transform:translateX(0)}
@media(max-width:700px){#cabinet .chart{padding:22px 16px 16px}#cabinet .chart-day{gap:3px}.bar-value{font-size:10px;letter-spacing:-.2px}#cabinet .chart-bars{gap:7px}#cabinet .chart-month .chart-bars{gap:3px}.chart-detail{font-size:10px}}

#cabinet .chart-plot{overflow-x:auto;padding-top:20px;scrollbar-width:thin}#cabinet .chart-bars{height:78px;padding-top:0}.chart-month .bar-value{display:block}.chart-month .chart-selected .bar-value{padding:0;background:none}.chart-month .chart-selected .joins .bar-value,.chart-month .chart-selected .blocked .bar-value{transform:translateX(-50%)}
#cabinet .page-heading .button{white-space:nowrap;flex:none}#cabinet .chart-day:focus-visible{outline:2px solid #10b981;outline-offset:3px}
#cabinet .chart-plot{padding-inline:10px}

/* Searchable menus share LinkStat behavior and the cabinet control palette. */
.combo-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;height:46px;padding:10px 13px;border:1px solid var(--secondary-border);border-radius:12px;background:var(--paper);color:var(--ink);text-align:left;font-size:13px;line-height:1.4}
#channel-trigger{flex:1;width:100%;max-width:420px}#status-trigger,#group-trigger{flex:0 1 185px}
.combo-trigger:hover,.combo-trigger[aria-expanded=true]{border-color:#10b981}.combo-trigger[aria-expanded=true]{box-shadow:0 0 0 3px #10b98118}
.combo-caption{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.combo-chevron{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;color:var(--muted);transition:transform .15s}.combo-trigger[aria-expanded=true] .combo-chevron{transform:rotate(180deg)}
.combo-popup{position:fixed;z-index:1000;display:flex;flex-direction:column;padding:7px;border:1px solid var(--secondary-border);border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:0 14px 48px #17213a25;overflow:hidden}
.combo-search{flex:none;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--secondary-border);border-radius:9px;background:var(--secondary-bg);color:var(--ink);font-size:16px;line-height:1.4;margin:0 0 6px;appearance:none;-webkit-appearance:none}.combo-search:focus{border-color:#10b981;outline:0;box-shadow:inset 0 0 0 1px #10b981}
.combo-options{overflow:auto;min-height:0;overscroll-behavior:contain;scrollbar-width:thin;outline:none}.combo-option{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;width:100%;padding:10px;border:0;border-radius:8px;background:transparent;color:var(--ink);text-align:left;font-size:13px;overflow-wrap:anywhere}.combo-option>span:first-child{min-width:0}.combo-option.is-active{background:var(--secondary-bg)}.combo-option[aria-selected=true]{background:var(--soft-blue);color:var(--green);font-weight:600}.combo-tick{flex:none;width:14px}.combo-empty{padding:22px 10px;text-align:center;color:var(--muted);font-size:13px}
#cabinet .search{border-color:var(--secondary-border)}.form-field input,.referral-link input{min-height:44px;border-color:var(--secondary-border);border-radius:12px;background:var(--paper);color:var(--ink)}
@media(max-width:700px){#channel-trigger{max-width:none}#status-trigger,#group-trigger{flex:1;min-width:0;font-size:13px}.form-field input{font-size:16px}.event-label{line-height:1.5}}

/* Flat app header, with a coherent account row on narrow screens. */
#cabinet .app-header{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;padding:16px 0;margin-top:0;min-height:80px}
#cabinet .account-profile{display:flex;align-items:center;gap:10px;min-width:0;max-width:260px;min-height:48px;padding:6px 10px;border:1px solid var(--secondary-border);border-radius:12px;background:var(--secondary-bg);color:var(--ink);text-align:left}
#cabinet #account-avatar{display:flex;flex:none}#cabinet #account-avatar .person-avatar{width:34px;height:34px;font-size:14px}
.account-identity{min-width:0;flex:1}#cabinet #account-name{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;line-height:1.4;max-width:170px}.account-identity small{display:block;font-size:11px;color:var(--muted);line-height:1.4;margin-top:2px}.account-chevron{font-size:20px;line-height:1;color:var(--muted)}
.combo-avatar-slot,.combo-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none}.combo-avatar{position:relative;width:26px;height:26px;border-radius:50%;background:var(--soft-blue);color:var(--green);font-size:11px;overflow:hidden}.combo-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.combo-caption{flex:1}.combo-option-label{min-width:0;flex:1}
@media(max-width:700px){
 #cabinet .app-header{display:grid;grid-template-columns:1fr 44px auto;gap:10px 8px;padding:14px 0 10px}
 #cabinet .app-header .brand{grid-column:1;grid-row:1;font-size:14px}
 #cabinet .account{display:contents}
 #cabinet .account .theme-toggle{grid-column:2;grid-row:1}
 #cabinet #logout{grid-column:3;grid-row:1}
 #cabinet #billing{grid-column:1/-1;grid-row:2;max-width:none;width:100%;padding:8px 2px;border:0;background:transparent}
 #cabinet #account-name{font-size:14px;max-width:none}
 #cabinet #account-avatar .person-avatar{width:38px;height:38px}
 #cabinet .dashboard{padding-top:24px}
}