/* Theme switch button, shown in both themes */
.th-tg{flex:none;width:40px;height:40px;padding:0;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#F2F5F0;cursor:pointer;transition:border-color .15s,background .15s}
.th-tg:hover{border-color:#C6F432;background:rgba(198,244,50,.12)}
.th-tg svg{display:block}
.th-tg .moon{display:none}
html[data-theme=light] .th-tg{border-color:rgba(11,15,20,.22);background:#fff;color:#0B0F14}
html[data-theme=light] .th-tg:hover{border-color:#4D7C0F;background:#F1F7DF}
html[data-theme=light] .th-tg .sun{display:none}
html[data-theme=light] .th-tg .moon{display:block}
/* Sign-in menu: customer and admin */
details.nd,html[data-theme=light] details.nd{border:0;padding:0;margin:0;border-radius:0;background:transparent}
details.acct,html[data-theme=light] details.acct{position:relative;flex:none;border:0;padding:0;margin:0;border-radius:0;background:transparent}
.acct summary{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;list-style:none;cursor:pointer;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#F2F5F0;transition:border-color .15s,background .15s}
.acct summary::-webkit-details-marker{display:none}
.acct summary:hover,.acct[open] summary{border-color:#C6F432;background:rgba(198,244,50,.12)}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;display:grid;min-width:190px;padding:6px;background:#1A222C;border:1px solid #26303C;border-radius:14px;box-shadow:0 20px 40px -20px rgba(0,0,0,.7)}
.nav .acct-menu a{display:block;padding:11px 12px;border-radius:10px;text-decoration:none;color:#F2F5F0;font:600 14.5px/1.2 var(--f,var(--display));white-space:nowrap}
.nav .acct-menu a:hover{background:rgba(198,244,50,.14);color:#F2F5F0}
html[data-theme=light] .acct summary{border-color:rgba(11,15,20,.22);background:#fff;color:#0B0F14}
html[data-theme=light] .acct summary:hover,html[data-theme=light] .acct[open] summary{border-color:#4D7C0F;background:#F1F7DF}
html[data-theme=light] .acct-menu{background:#fff;border-color:var(--line);box-shadow:0 16px 36px -18px rgba(11,15,20,.45)}
html[data-theme=light] .nav .acct-menu a{color:#0B0F14;background:transparent}
html[data-theme=light] .nav .acct-menu a:hover{background:#F1F7DF;color:#0B0F14}
/* Home page header on laptops: tighter gaps make room for the switch, so nothing wraps */
@media (min-width:1280px) and (max-width:1399.98px){
  .nav#nav .wrap{gap:8px}
  .nav#nav .links a{padding-left:6px;padding-right:6px;font-size:14.5px}
  .nav#nav .logo{flex:none}
  .nav#nav .logo small{white-space:nowrap}
  .nav#nav .kd-ntext{flex:none;white-space:nowrap}
  .nav#nav .act{flex:none}
}
/* Home page header on tablets: keep logo, button, KPR icon, switch and menu on one line */
@media (max-width:1279.98px){
  .nav#nav .wrap{gap:10px}
  .nav#nav .logo{flex:none}
  .nav#nav .logo small{white-space:nowrap}
  .nav#nav .kd-ntext{flex:none;white-space:nowrap}
  .nav#nav .act{flex:none}
  .nav#nav .menu-btn{flex:none}
}
@media (max-width:720px){.nav#nav .kd-ntext{display:none}}
@media (max-width:610px){.nav#nav .act{display:none}.nav#nav .kd-nav{margin-left:auto;margin-right:0}}
/* Home page header on phones: logo, KPR icon, switch and menu all fit */
@media (max-width:480px){
  .nav#nav .wrap{gap:6px}
  .nav#nav .logo{gap:8px}
  .nav#nav .logo b{font-size:14px}
  .nav#nav .kd-nav{width:30px;height:30px}
  .nav#nav .menu-btn{width:40px;height:40px}
  .nav#nav :is(.th-tg,.acct summary){width:34px;height:34px}
}
@media (max-width:359px){
  .nav#nav .wrap{gap:4px}
  .nav#nav .mark{width:32px;height:32px;font-size:13px}
  .nav#nav .logo{gap:6px}
  .nav#nav .logo b{font-size:13px}
  .nav#nav .kd-nav{width:28px;height:28px}
  .nav#nav .menu-btn{width:36px;height:36px}
  .nav#nav :is(.th-tg,.acct summary){width:32px;height:32px}
}
/* Other pages on phones: tighter header. On the smallest screens the button steps aside so sign-in and the switch stay. */
@media (max-width:560px){
  .nav:not(#nav) .wrap{gap:8px}
  .nav:not(#nav) .logo{gap:8px}
  .nav:not(#nav) .logo b{font-size:15px}
  .nav:not(#nav) .btn{padding:10px 12px!important;font-size:13px!important;margin-left:auto}
  .nav:not(#nav) :is(.th-tg,.acct summary){width:38px;height:38px}
}
@media (max-width:470px){.nav:not(#nav) .btn{display:none}.nav:not(#nav) .acct{margin-left:auto}}
@media (max-width:680px){.nav:not(#nav) nav{display:none}.nav:not(#nav) .btn{margin-left:auto}}

/* Bright theme: only applies when html has data-theme="light" */
html[data-theme=light]{--bg:#FAFBF7;--bg-2:#F2F4ED;--surface:#FFFFFF;--surface-2:#EDF0E6;--ink:#0B0F14;--muted:#4B5563;--line:#DDE2D6;--blue:#4D7C0F;--blue-2:#4D7C0F;--violet:#4D7C0F;--violet-2:#4D7C0F;--cyan:#4D7C0F;--acc:#4D7C0F;--ok:#047857;--warn:#B45309;--bad:#B91C1C;--pink:#BE185D;color-scheme:light}
html[data-theme=light] body{background:var(--bg);color:var(--ink)}

/* Header */
html[data-theme=light] .nav{background:rgba(250,251,247,.88);border-bottom-color:rgba(11,15,20,.1)}
html[data-theme=light] .nav.scrolled{box-shadow:0 12px 30px -20px rgba(11,15,20,.35)}
html[data-theme=light] :is(.links a,.nav nav a){color:#374151}
html[data-theme=light] :is(.links a,.nav nav a):hover{color:#0B0F14;background:rgba(11,15,20,.06)}
html[data-theme=light] .nd summary{color:#374151}
html[data-theme=light] .nd summary:hover,html[data-theme=light] .nd[open] summary{color:#0B0F14;background:rgba(11,15,20,.06)}
html[data-theme=light] .nd.on summary{color:#3F6212;background:rgba(198,244,50,.3);box-shadow:inset 0 -2px 0 #4D7C0F}
html[data-theme=light] .nav .links .nd-menu a.on{color:#0B0F14;background:transparent;box-shadow:none}
@media (max-width:1279.98px){html[data-theme=light] .links .nd-menu{background:transparent;box-shadow:none}html[data-theme=light] .nd.on summary{box-shadow:none}}
html[data-theme=light] .links a.on{color:#3F6212;background:rgba(198,244,50,.3);box-shadow:inset 0 -2px 0 #4D7C0F}
html[data-theme=light] :is(.links a.ft,.nav nav a.ft){color:#3F6212}
html[data-theme=light] .ft-bar{color:#365314;background:#E9F7B6;border-bottom-color:rgba(77,124,15,.3)}
html[data-theme=light] .menu-btn{color:#0B0F14;background:#fff;border-color:rgba(11,15,20,.22)}
html[data-theme=light] .logo small{color:var(--muted)}
@media (max-width:1279.98px){html[data-theme=light] .links{background:#fff}}
html[data-theme=light] .kd-lbl{color:#0B0F14}
html[data-theme=light] .kd-lbl em{color:#C2410C}
html[data-theme=light] .kdot{box-shadow:0 0 0 1px rgba(242,107,29,.5)}
html[data-theme=light] .kd-ntext{color:#0B0F14}
html[data-theme=light] .kd-ntext small{color:#047857}
html[data-theme=light] .kd-ntext b{color:#C2410C}

/* Buttons */
html[data-theme=light] .btn-g{background:#fff;border-color:rgba(11,15,20,.2);color:#0B0F14;backdrop-filter:none}
html[data-theme=light] .btn-g:hover{border-color:#4D7C0F}
html[data-theme=light] .btn-p{box-shadow:0 10px 22px -14px rgba(77,124,15,.8)}
html[data-theme=light] .btn-p:hover{background:#B8E62A;box-shadow:0 12px 26px -12px rgba(77,124,15,.9)}
html[data-theme=light] .light .btn-p{background:#0B0F14;color:#C6F432;box-shadow:none}
html[data-theme=light] .light .btn-p:hover{background:#1F2937}
html[data-theme=light] .opts button{border-color:#4D7C0F;background:#F1F7DF;color:#365314}
html[data-theme=light] .opts button:hover{background:#E4F2BC}
html[data-theme=light] .totop{box-shadow:0 10px 22px -10px rgba(77,124,15,.8)}

/* Page sections */
html[data-theme=light] .hero{background:radial-gradient(760px 480px at 85% 10%,rgba(198,244,50,.3),transparent 60%),var(--bg)}
html[data-theme=light] .hero::before{background-image:linear-gradient(rgba(11,15,20,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(11,15,20,.04) 1px,transparent 1px)}
html[data-theme=light] .hero .lead{color:#374151}
html[data-theme=light] .band{background:var(--bg-2)}
html[data-theme=light] .alt{background:var(--bg-2)}
html[data-theme=light] .light{--ink:#0B0F14;--muted:#4B5563;--line:#DDE2D6;background:#F2F4ED;color:#0B0F14}
html[data-theme=light] footer{border-top-color:var(--line)}
html[data-theme=light] footer a:hover{color:#0B0F14}
html[data-theme=light] .crumb:hover{color:#0B0F14}

/* Accent text: dark green, lime stays a fill */
html[data-theme=light] :is(.eyebrow,.grad-text,.hero .tl,.more,.c-mail a,.free .fr .get span,.wt em,.wt i,.qr-list em,.big,.cta-l a,legend,.rhythm span,.steps li::before){color:#4D7C0F}
html[data-theme=light] :is(.grad-text,.hero .tl){background:none;-webkit-text-fill-color:currentColor}
html[data-theme=light] .sec-head p:not(.eyebrow),html[data-theme=light] .prod p,html[data-theme=light] .svc p{color:var(--muted)}
html[data-theme=light] .sec-head p.eyebrow{color:#4D7C0F}
html[data-theme=light] .more:hover{color:#0B0F14}
html[data-theme=light] .qr-list .ok2 em{color:#047857}
html[data-theme=light] [style*="color:#C6F432"]{color:#3F6212!important}
html[data-theme=light] .ed .do em{color:#3F6212}
html[data-theme=light] details.how code{color:#3F6212}
html[data-theme=light] :is(.svc ul,.prod ul,.dash li){color:#374151}
html[data-theme=light] .doc :is(p,li){color:#374151}

/* Cards and panels */
html[data-theme=light] .card{background:#fff;border-color:var(--line);box-shadow:0 1px 2px rgba(11,15,20,.05),0 18px 40px -32px rgba(11,15,20,.4)}
html[data-theme=light] fieldset{background:#fff}
html[data-theme=light] details{background:#fff}
html[data-theme=light] :is(.prod.flag,.prod.qflag){background:radial-gradient(500px 300px at 90% 10%,rgba(198,244,50,.28),transparent 70%),#fff;border-color:rgba(77,124,15,.55)}
html[data-theme=light] :is(.case,.cta,.visual){background:radial-gradient(500px 260px at 100% 0%,rgba(198,244,50,.28),transparent 70%),#fff}
html[data-theme=light] .qa .act-c:hover{box-shadow:0 0 0 3px rgba(198,244,50,.4),0 18px 40px -28px rgba(11,15,20,.4)}
html[data-theme=light] .qa .act-c:first-child{border-color:#4D7C0F;box-shadow:0 0 0 3px rgba(198,244,50,.35)}
html[data-theme=light] .ic{background:#EAF5C8;color:#3F6212}
html[data-theme=light] :is(.qa .act-c:first-child .ic,.svc .ic,.feat .ic){background:#C6F432;color:#0B0F14}
html[data-theme=light] .light .svc .ic{background:#0B0F14;color:#C6F432}
html[data-theme=light] .pk .ic{background:#0B0F14;color:#C6F432}
html[data-theme=light] :is(.qa .act-c:hover,.svc article:hover,.prod:hover,.bz:hover,.feat:hover,.wt:hover,.labs-t:hover,.tool:hover,.free .fr:hover){border-color:#4D7C0F}
html[data-theme=light] .tags span{background:#EAF5C8;color:#365314}
html[data-theme=light] .tags span.free{background:#D1FAE5;color:#065F46}
html[data-theme=light] :is(.flag .tags span:first-child,.prod.qflag .tags span:first-child){background:#C6F432;color:#0B0F14}
html[data-theme=light] :is(.chips span,.nums div){background:#F2F4ED;border-color:var(--line);color:#0B0F14}
html[data-theme=light] .stats{background:#fff;backdrop-filter:none}
html[data-theme=light] :is(.filters button,.show-tabs button,.jump a,.others a){background:#fff;color:#374151}
html[data-theme=light] .show-tabs button[aria-selected="true"]{background:#C6F432;color:#0B0F14}
html[data-theme=light] .show-tabs button[aria-selected="true"] .bar{background:#0B0F14}
html[data-theme=light] .filters button[aria-pressed="true"]{background:#0B0F14;border-color:#0B0F14;color:#C6F432}
html[data-theme=light] :is(.jump a,.others a):hover{border-color:#4D7C0F;color:#0B0F14}
html[data-theme=light] .stage{background:radial-gradient(400px 260px at 70% 20%,rgba(198,244,50,.22),transparent 70%),var(--bg-2)}
html[data-theme=light] .mk{background:#fff}
html[data-theme=light] :is(.kp div,.row-chk){background:rgba(11,15,20,.05)}
html[data-theme=light] .bars i{background:linear-gradient(#A3E635,#4D7C0F)}
html[data-theme=light] .bars i:nth-child(3n){background:linear-gradient(#374151,#9CA3AF)}
html[data-theme=light] .screen{background:#fff;border-color:#1F2937}
html[data-theme=light] .base{background:linear-gradient(#D1D5DB,#9CA3AF)}
html[data-theme=light] .dash li::before{background:#4D7C0F;box-shadow:inset 0 0 0 5px var(--bg)}
html[data-theme=light] .light .dash li::before{box-shadow:inset 0 0 0 5px #F2F4ED}
html[data-theme=light] .g1 .go{color:#0F766E}
html[data-theme=light] .g2 .go{color:#BE185D}
html[data-theme=light] .fk{background:radial-gradient(600px 240px at 0% 50%,rgba(242,107,29,.14),transparent 70%),#fff;border-color:rgba(194,65,12,.5)}
html[data-theme=light] .fk-t .eyebrow{color:#C2410C}
html[data-theme=light] .fk-logo{box-shadow:0 0 0 1px rgba(194,65,12,.3)}
html[data-theme=light] .free .card{border-color:rgba(4,120,87,.4)}
html[data-theme=light] .plat a em{color:#3F6212}
html[data-theme=light] .chat-h{background:var(--bg-2)}

/* Pricing, solutions and social */
html[data-theme=light] .hero .launch{color:#0B0F14;border-color:rgba(77,124,15,.6);background:#F1F7DF;box-shadow:none}
html[data-theme=light] .launch{border-color:rgba(77,124,15,.6);background:#F1F7DF}
html[data-theme=light] .plan .pr .lp{color:#3F6212}
html[data-theme=light] .tool em{background:#EAF5C8;color:#365314}
html[data-theme=light] .blk h3 small{background:#EAF5C8;color:#365314}
html[data-theme=light] .wk div{background:#F1F7DF;border-color:rgba(77,124,15,.35)}
html[data-theme=light] .wk div.off{background:transparent;border-color:var(--line);opacity:1}
html[data-theme=light] .wk div.off :is(span,b){color:#6B7280}
html[data-theme=light] .how li::before{background:#C6F432;color:#0B0F14}
html[data-theme=light] .jump i{box-shadow:none}

/* Tools and forms */
html[data-theme=light] .tool .res{background:#F7FAEA}
html[data-theme=light] .kv div{background:#fff}
html[data-theme=light] .tool :is(input,select){background:#fff}
html[data-theme=light] .bar{background:#4D7C0F}
html[data-theme=light] .desk .bar{background:rgba(15,18,25,.92)}
html[data-theme=light] .show-tabs .bar{background:transparent}
html[data-theme=light] .cta-l{border-color:rgba(77,124,15,.55)}
html[data-theme=light] :is(input,select,textarea)::placeholder{color:#6B7280}
html[data-theme=light] :is(.cform input,.cform select,.cform textarea):focus{border-color:#4D7C0F;box-shadow:0 0 0 3px rgba(198,244,50,.45)}
html[data-theme=light] :is(.c-err,.err){color:#B91C1C}
html[data-theme=light] :is(.picks label:has(input:checked),.need-tabs label:has(input:checked)){border-color:#4D7C0F;background:#F1F7DF}
html[data-theme=light] :is(.picks input,.need-tabs input,.set input[type=checkbox]){accent-color:#4D7C0F}
html[data-theme=light] .done{border-color:rgba(77,124,15,.5);background:#F1F7DF}
html[data-theme=light] .intro{color:var(--muted)}
html[data-theme=light] .app .intro{color:var(--ink);border-color:rgba(77,124,15,.4);background:#F1F7DF}

/* Demos and dialogs */
html[data-theme=light] dialog{background:#fff;box-shadow:0 30px 80px -24px rgba(11,15,20,.5)}
html[data-theme=light] dialog::backdrop{background:rgba(11,15,20,.45)}
html[data-theme=light] .toast{background:#fff;box-shadow:0 14px 34px -18px rgba(11,15,20,.45)}
html[data-theme=light] .qp-log{background:var(--bg-2);color:#374151}
html[data-theme=light] .qp-log div b{color:#3F6212}
html[data-theme=light] .qp-f .sv.c{background:#FEE2E2;color:#991B1B}
html[data-theme=light] .qp-f .sv.w{background:#FEF3C7;color:#92400E}
html[data-theme=light] .qp-f .sv.p{background:#D1FAE5;color:#065F46}
html[data-theme=light] .qp-tag{background:#FEF3C7;color:#92400E}
html[data-theme=light] .qp-cta{border-color:rgba(77,124,15,.5);background:#F1F7DF}
html[data-theme=light] .qp-bar i{background:#4D7C0F}
html[data-theme=light] .ed :is(h3,.do){color:#0B0F14}
html[data-theme=light] .ed-dots i{background:#D5DACC}
html[data-theme=light] .ed-dots i.e{background:rgba(77,124,15,.3)}
html[data-theme=light] .ed-dots i.on{background:#4D7C0F}
html[data-theme=light] .ed-dots i.m.on{background:#DB2777}
html[data-theme=light] .ed-dots i.done{background:#047857}
html[data-theme=light] .qf-steps span.on{color:#0B0F14;border-color:#4D7C0F;background:#F1F7DF}
html[data-theme=light] .qf-steps span.on i{background:#C6F432;color:#0B0F14}
html[data-theme=light] .qf-steps span.done{opacity:1}
html[data-theme=light] .dlg .x{color:#374151}
html[data-theme=light] [stroke="#26303C"],html[data-theme=light] [stroke="#1f2b52"]{stroke:#DDE2D6}
html[data-theme=light] .ring [stroke="#6c9bff"],html[data-theme=light] .mk [stroke="#6c9bff"]{stroke:#4D7C0F}
html[data-theme=light] [stroke="#C6F432"]{stroke:#65A30D}
/* Break screen in the 20:20:20 app stays dark on purpose, as does the Windows desktop preview */

/* Dashboard */
html[data-theme=light] body:has(> .app > aside){background:radial-gradient(700px 400px at 90% 0%,rgba(198,244,50,.25),transparent 60%),var(--bg)}
html[data-theme=light] aside{background:#fff}
html[data-theme=light] .nv{color:#374151}
html[data-theme=light] .nv.on{background:#EAF5C8;color:#0B0F14;box-shadow:inset 3px 0 0 #4D7C0F}
html[data-theme=light] .side-card{background:#F1F7DF;border-color:rgba(77,124,15,.35)}
html[data-theme=light] .al{background:var(--bg-2)}
html[data-theme=light] .al button{border-color:#4D7C0F;background:#F1F7DF;color:#365314}
html[data-theme=light] .al button.done{border-color:#047857;background:#D1FAE5;color:#065F46}
html[data-theme=light] .bars2 .t i{background:#4D7C0F}
html[data-theme=light] svg [fill="#9aa4c7"]{fill:#4B5563}
html[data-theme=light] svg text[fill="#fff"]{fill:#0B0F14}
html[data-theme=light] svg polyline[stroke="#6c9bff"]{stroke:#4D7C0F}
html[data-theme=light] #fa stop{stop-color:#84CC16}
html[data-theme=light] svg circle[fill="#6c9bff"]{fill:#4D7C0F}
html[data-theme=light] .st.ok{background:#D1FAE5;color:#065F46}
html[data-theme=light] .st.wn{background:#FEF3C7;color:#92400E}
html[data-theme=light] .st.bd{background:#FEE2E2;color:#991B1B}

/* 404 page */
html[data-theme=light] body:has(a.b){background:var(--bg);color:#0B0F14}
html[data-theme=light] body:has(a.b) :is(p,.f a){color:#4B5563}

/* Small fills inside mock-ups */
html[data-theme=light] .phone .av{color:#0B0F14}
html[data-theme=light] .phone .b.me{background:#2563EB}
html[data-theme=light] i[style*="#25d366"]{color:#0B0F14}
html[data-theme=light] i[style*="#1877f2"]{background:#1464D2!important}
html[data-theme=light] .mk .toast{opacity:1!important}
html[data-theme=light] .mk-ig i{opacity:1}
html[data-theme=light] .mk-ig i:is([style*="#f58529"],[style*="#feda77"]){color:#0B0F14}
html[data-theme=light] .qf-f b{color:#6B7280}
html[data-theme=light] .qf-pop b{background:#C6F432;color:#0B0F14}
html[data-theme=light] .mk [style*="color:#9aa4c7"],html[data-theme=light] .out[style*="color:#9aa4c7"]{color:#4B5563!important}

/* Customer and admin pages */
html[data-theme=light] .ms .done{background:transparent;border-color:var(--line)}
html[data-theme=light] .tag{background:#D1FAE5;color:#065F46}
html[data-theme=light] .tag.p{background:#FEF3C7;color:#92400E}
html[data-theme=light] .pill{background:#EAF5C8;color:#365314}