/* ===== help search ===== */
#kb-search{position:relative;margin-bottom:16px}
.kb-field{display:flex;align-items:center;gap:9px;border:1px solid var(--line-2);border-radius:6px;background:var(--bg);padding:0 11px;transition:border-color .15s ease}
#kb-search.open .kb-field,.kb-field:focus-within{border-color:var(--blue)}
.kb-field svg{width:14px;height:14px;color:var(--ink-3);flex:none}
.kb-field:focus-within svg{color:var(--blue)}
#kb-q{flex:1;min-width:0;border:0;background:none;outline:0;font-family:var(--sans);font-size:13.5px;color:var(--ink);padding:10px 0}
#kb-q::placeholder{color:var(--ink-3)}
.kb-kbd{font-family:var(--mono);font-size:9.5px;letter-spacing:0.06em;color:var(--ink-3);border:1px solid var(--line);border-radius:3px;padding:2px 5px;flex:none}
.kb-field:focus-within .kb-kbd{display:none}
#kb-results{display:none;position:absolute;top:calc(100% + 7px);left:0;width:min(430px,calc(100vw - 48px));max-height:min(480px,70vh);overflow-y:auto;overscroll-behavior:contain;background:var(--bg);border:1px solid var(--line-2);border-radius:8px;box-shadow:0 20px 48px -12px rgba(10,13,16,.26),0 3px 10px rgba(10,13,16,.06);z-index:60;padding:6px}
html[data-theme="dark"] #kb-results{box-shadow:0 20px 48px -12px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.07)}
#kb-search.open #kb-results{display:block}
.kb-hit{display:grid;gap:4px;padding:11px 12px;border-radius:5px;transition:background .12s ease}
.kb-hit:hover,.kb-hit.on{background:var(--bg-2)}
.kb-hit-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.kb-hit-top b{font-size:14px;font-weight:700;letter-spacing:-0.015em;line-height:1.3;color:var(--ink)}
.kb-hit-top em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;flex:none}
.kb-hit:hover .kb-hit-top b,.kb-hit.on .kb-hit-top b{color:var(--blue)}
.kb-hit-sub{font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.kb-hit mark{background:rgba(27,100,243,.14);color:var(--blue);font-weight:700;border-radius:2px;padding:0 1px}
.kb-empty{display:grid;gap:5px;padding:16px 12px}
.kb-empty b{font-size:13.5px;font-weight:700;color:var(--ink)}
.kb-empty span{font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.kb-empty a{color:var(--blue)}
@media(max-width:920px){#kb-search{margin:16px 18px 4px}#kb-results{width:100%}}

/* ===== knowledge-base shell ===== */
.kb-main .cat-grid{grid-template-columns:repeat(2,1fr)}
@media(max-width:640px){.kb-main .cat-grid{grid-template-columns:1fr}}
.kb-wrap{padding:clamp(30px,3.4vw,44px) 0 clamp(52px,6vw,84px)}
.kb{display:grid;grid-template-columns:238px minmax(0,1fr);gap:clamp(34px,5vw,68px);align-items:start}
.kb-main{min-width:0}
.kb-head{display:grid;gap:15px;padding-bottom:clamp(26px,3vw,38px);margin-bottom:clamp(26px,3vw,38px);border-bottom:1px solid var(--line)}
.kb-head h1{font-size:clamp(28px,3.8vw,46px);font-weight:800;letter-spacing:-0.04em;line-height:1.05;text-wrap:balance}
.kb-head h1 em{font-style:normal;color:var(--blue)}
.kb-head .lede{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:62ch;text-wrap:pretty}

/* sidebar */
.kb-nav{position:sticky;top:88px}
.kb-inner{max-height:calc(100vh - 178px);overflow-y:auto;overscroll-behavior:contain;padding-right:6px}
.kb-inner::-webkit-scrollbar{width:5px}
.kb-inner::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.kb-home{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;font-weight:700;color:var(--ink);padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.kb-home svg{width:13px;height:13px;color:var(--blue);flex:none}
.kb-home:hover{color:var(--blue)}
.kb-sec{margin-bottom:22px}
.kb-sec:last-child{margin-bottom:0}
.kb-sec>.kb-cat{display:block;font-size:13.5px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);margin-bottom:9px;line-height:1.35}
.kb-sec>.kb-cat:hover{color:var(--blue)}
.kb-sec>.kb-cat.on{color:var(--blue)}
.kb-sec ul{list-style:none;display:grid;gap:1px;padding-left:0;border-left:1px solid var(--line);margin-left:1px}
.kb-sec ul a{display:block;font-size:13.5px;line-height:1.45;color:var(--ink-2);padding:5px 0 5px 13px;margin-left:-1px;border-left:1px solid transparent;transition:color .14s ease,border-color .14s ease}
.kb-sec ul a:hover{color:var(--blue)}
.kb-sec ul a.on{color:var(--blue);font-weight:600;border-left-color:var(--blue)}
.kb-soon{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.kb-soon h6{font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:11px}
.kb-soon ul{list-style:none;display:grid;gap:7px;padding-left:0}
.kb-soon li{font-size:13px;line-height:1.35;color:var(--ink-3)}
.kb-anchors{margin-top:6px}
.kb-anchors a{font-size:12.5px !important;color:var(--ink-3) !important}
.kb-anchors a:hover,.kb-anchors a.on{color:var(--blue) !important}
.kb-anchors a.on{font-weight:600}

/* mobile: collapse the tree */
.kb-toggle{display:none}
@media(max-width:920px){
  .kb{grid-template-columns:1fr;gap:26px}
  .kb-nav{position:static;border:1px solid var(--line);border-radius:6px;padding:0}
  .kb-nav>.kb-inner{display:none;max-height:none;overflow:visible;padding:0 18px 20px}
  .kb-nav.open>.kb-inner{display:block}
  .kb-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;background:none;border:0;cursor:pointer;padding:15px 18px;font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;color:var(--ink)}
  .kb-toggle .cv{width:9px;height:9px;border-right:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);transform:rotate(45deg);transition:transform .18s ease;margin-bottom:3px}
  .kb-nav.open .kb-toggle .cv{transform:rotate(-135deg);margin-bottom:0;margin-top:3px}
  .kb-home{padding-top:4px}
}
/* Help Center — tutorials & documentation
   Loaded after webflow.css on /help/* pages. Uses existing tokens. */

/* page hero for docs pages */
.dhero{padding:clamp(40px,5vw,64px) 0 clamp(30px,3.4vw,44px);border-bottom:1px solid var(--line)}
.dhero .wrap{display:grid;gap:16px;max-width:900px}
.dhero h1{font-size:clamp(30px,4.2vw,54px);font-weight:800;letter-spacing:-0.04em;line-height:1.03;text-wrap:balance}
.dhero h1 em{font-style:normal;color:var(--blue)}
.dhero .lede{font-size:17.5px;line-height:1.6;color:var(--ink-2);max-width:62ch;text-wrap:pretty}
.dhero .kicker{margin-bottom:2px}

/* category grid */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cat{position:relative;border:1px solid var(--line);border-radius:6px;background:var(--bg);padding:26px 26px 28px;display:grid;gap:9px;align-content:start;transition:border-color .18s ease,transform .18s ease}
a.cat:hover{border-color:var(--blue);transform:translateY(-2px)}
.cat .ic{width:22px;height:22px;color:var(--ink);margin-bottom:12px}
.cat .ic svg{width:100%;height:100%;display:block}
a.cat:hover .ic{color:var(--blue)}
.cat h3{font-size:16.5px;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.cat p{font-size:14px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.cat .n{font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-top:5px}
.cat.pending{background:var(--bg-2)}
.cat.pending .ic,.cat.pending h3{color:var(--ink-2)}
.cat.pending .n{color:var(--ink-3)}
@media(max-width:900px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cat-grid{grid-template-columns:1fr}}

/* tutorial list rows */
.tut-list{display:grid;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg)}
.tut{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:22px 26px;border-bottom:1px solid var(--line);transition:background .15s ease}
.tut:last-child{border-bottom:0}
a.tut:hover{background:var(--bg-2)}
.tut .num{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;color:var(--ink-3);min-width:26px}
.tut .tt{display:grid;gap:5px}
.tut .tt h3{font-size:16.5px;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
a.tut:hover .tt h3{color:var(--blue)}
.tut .tt p{font-size:14px;line-height:1.5;color:var(--ink-2);text-wrap:pretty;max-width:70ch}
.tut .meta{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.tut .tag{border:1px solid var(--line-2);border-radius:40px;padding:5px 11px;color:var(--ink-2)}
.tut .tag.demo{border-color:var(--blue);color:var(--blue)}
@media(max-width:760px){.tut{grid-template-columns:1fr;gap:12px}.tut .num{display:none}}

.list-note{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin-top:18px}

/* doc layout: sticky toc + article */
.doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.toc{position:sticky;top:96px;display:grid;gap:10px}
.toc h6{font-family:var(--mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.toc a{font-size:14px;line-height:1.4;color:var(--ink-2);padding-left:12px;border-left:1px solid var(--line-2);transition:color .15s ease,border-color .15s ease}
.toc a em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;color:var(--ink-3)}
.toc a:hover em,.toc a.on em{color:var(--blue)}
.toc a:hover,.toc a.on{color:var(--blue);border-color:var(--blue)}
@media(max-width:920px){.doc{grid-template-columns:1fr}.toc{position:static;padding-bottom:8px;border-bottom:1px solid var(--line)}}

/* article typography */
.doc-body{max-width:74ch;display:grid;gap:0}
.doc-body>*+*{margin-top:18px}
.doc-body h2{font-size:clamp(22px,2.3vw,29px);font-weight:800;letter-spacing:-0.03em;line-height:1.15;margin-top:48px;scroll-margin-top:110px}
.doc-body h2:first-child{margin-top:0}
.doc-body h3{font-size:18px;font-weight:700;letter-spacing:-0.02em;margin-top:32px;scroll-margin-top:110px}
.doc-body p{font-size:16.5px;line-height:1.68;color:var(--ink-2);text-wrap:pretty}
.doc-body strong{color:var(--ink);font-weight:700}
.doc-body a:not(.btn){color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.doc-body .rel-grid a,.doc-body .doc-next a{text-decoration:none;color:inherit}
.doc-body ul,.doc-body ol{display:grid;gap:10px;padding-left:22px;color:var(--ink-2);font-size:16.5px;line-height:1.6}
.doc-body li::marker{color:var(--ink-3)}
.doc-body code{font-family:var(--mono);font-size:13.5px;background:var(--bg-3);border:1px solid var(--line);border-radius:4px;padding:2px 6px;color:var(--ink)}
.doc-body hr{border:0;border-top:1px solid var(--line);margin:44px 0}

/* numbered steps */
.steps{display:grid;gap:0;counter-reset:st;border-left:1px solid var(--line);padding-left:0;margin-top:26px}
.step{position:relative;padding:0 0 30px 30px;counter-increment:st}
.step:last-child{padding-bottom:0}
.step::before{content:counter(st);position:absolute;left:-13px;top:0;width:25px;height:25px;border-radius:50%;background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:11px;font-weight:700;display:grid;place-items:center}
.step h4{font-size:16.5px;font-weight:700;letter-spacing:-0.02em;margin-bottom:7px;line-height:1.3}
.step p{font-size:15.5px;line-height:1.62;color:var(--ink-2);text-wrap:pretty}
.step p+p{margin-top:10px}

/* callouts */
.note{border:1px solid var(--line);border-radius:6px;background:var(--bg-2);padding:20px 22px;display:grid;gap:7px}
.note .nk{font-family:var(--mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;font-weight:700;color:var(--blue)}
.note p{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin:0}
.note.warn .nk{color:#c2410c}
.note.warn{border-color:rgba(194,65,12,.28);background:rgba(194,65,12,.05)}

/* arcade interactive demo embed */
.arcade{margin-top:26px}
.arcade-head{display:grid;gap:7px;margin-bottom:18px}
.arcade-head .ak{font-family:var(--mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--blue);font-weight:700}
.arcade-head h2{font-size:clamp(20px,2.1vw,26px);font-weight:800;letter-spacing:-0.03em;line-height:1.15;color:var(--ink)}
.arcade-head p{font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:62ch;text-wrap:pretty}
.arcade-frame{position:relative;padding-bottom:56.25%;height:0;border-radius:8px;overflow:hidden;box-shadow:0 22px 55px -14px rgba(10,13,16,.30),0 4px 14px rgba(10,13,16,.07)}
html[data-theme="dark"] .arcade-frame{box-shadow:0 22px 55px -14px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.09)}
.arcade-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;color-scheme:light}
.arcade-ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;text-align:center;padding:24px;background-color:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);background-image:repeating-linear-gradient(135deg,rgba(10,13,16,.025) 0 14px,transparent 14px 28px)}
.arcade-ph .pi{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--blue);background:var(--bg)}
.arcade-ph .pi svg{width:16px;height:16px}
.arcade-ph b{font-size:15px;font-weight:700;letter-spacing:-0.01em;color:var(--ink)}
.arcade-ph span{font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3)}
.arcade-cap{font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin-top:12px}

/* footer nav */
.doc-next{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:56px;padding-top:32px;border-top:1px solid var(--line)}
.doc-next a{border:1px solid var(--line);border-radius:6px;padding:20px 22px;display:grid;gap:6px;transition:border-color .18s ease}
.doc-next a:hover{border-color:var(--blue)}
.doc-next span{font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3)}
.doc-next b{font-size:15.5px;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.doc-next a:hover b{color:var(--blue)}
@media(max-width:640px){.doc-next{grid-template-columns:1fr}}

/* shop-name personalizer */
.snbar{border:1px solid var(--line);border-radius:6px;background:var(--bg-2);padding:20px 22px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 24px;align-items:center}
.snbar label{display:grid;gap:7px}
.snbar .sl{font-family:var(--mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--blue);font-weight:700}
.snbar input{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-0.01em;color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:5px;padding:11px 14px;width:100%;max-width:380px;transition:border-color .15s ease}
.snbar input::placeholder{color:var(--ink-3);font-weight:400}
.snbar input:focus{outline:0;border-color:var(--blue)}
.snbar .sh{font-size:14px;line-height:1.5;color:var(--ink-2);max-width:34ch;text-wrap:pretty}
@media(max-width:720px){.snbar{grid-template-columns:1fr}}

/* merge-field tokens */
.tok{font-family:var(--mono);font-size:.86em;color:var(--ink-3);white-space:nowrap}
.sn{font-family:var(--mono);font-size:.86em;color:var(--ink-3);white-space:nowrap;transition:color .15s ease}
.sn.filled{font-family:inherit;font-size:inherit;color:var(--blue);font-weight:700}

/* copyable example blocks */
.ex{border:1px solid var(--line);border-left:2px solid var(--blue);border-radius:5px;background:var(--bg-2);margin-top:20px}
.ex-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px 12px 18px;border-bottom:1px solid var(--line)}
.ex-head .exl{font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.ex-copy{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-2);background:var(--bg);border:1px solid var(--line-2);border-radius:40px;padding:6px 13px;cursor:pointer;transition:color .15s ease,border-color .15s ease}
.ex-copy:hover{color:var(--blue);border-color:var(--blue)}
.ex-copy svg{width:12px;height:12px;flex:none}
.ex-copy.ok{color:var(--blue);border-color:var(--blue)}
.ex-body{padding:18px 20px}
.ex-body p{font-size:15.5px;line-height:1.65;color:var(--ink)}
.ex-body p+p{margin-top:14px}

/* keyword pills */
.kw{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.kw span{font-family:var(--mono);font-size:12px;letter-spacing:0.1em;font-weight:700;color:var(--ink);border:1px solid var(--line-2);background:var(--bg-2);border-radius:4px;padding:7px 12px}

/* interactive checklist */
.chk{display:grid;gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:22px}
.chk label{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;padding:13px 18px;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5;color:var(--ink-2);cursor:pointer;transition:background .12s ease}
.chk label:last-child{border-bottom:0}
.chk label:hover{background:var(--bg-2)}
.chk input{appearance:none;-webkit-appearance:none;width:17px;height:17px;margin-top:2px;border:1px solid var(--line-2);border-radius:3px;background:var(--bg);cursor:pointer;flex:none;position:relative}
.chk input:checked{background:var(--blue);border-color:var(--blue)}
.chk input:checked::after{content:'';position:absolute;left:5px;top:2px;width:5px;height:9px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}
.chk input:checked+span{color:var(--ink-3);text-decoration:line-through}
.chk-count{font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-top:14px}

/* demo-first tutorial page bits */
.covers{list-style:none;padding-left:0;display:grid;gap:11px;margin-top:18px}
.covers li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:16px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.covers li::before{content:'\2713';font-size:13px;font-weight:700;color:var(--blue);line-height:1.75}
.rel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}
.rel-grid a{border:1px solid var(--line);border-radius:6px;padding:18px 20px;display:grid;gap:5px;transition:border-color .18s ease}
.rel-grid a:hover{border-color:var(--blue)}
.rel-grid span{font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3)}
.rel-grid b{font-size:15px;font-weight:700;letter-spacing:-0.02em;line-height:1.35;color:var(--ink)}
.rel-grid a:hover b{color:var(--blue)}
@media(max-width:640px){.rel-grid{grid-template-columns:1fr}}

/* draft banner for pages awaiting content */
.doc-draft{border:1px dashed var(--line-2);border-radius:6px;padding:18px 20px;display:grid;gap:6px;background:var(--bg-2);margin-bottom:8px}
.doc-draft b{font-family:var(--mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3)}
.doc-draft p{font-size:15px;line-height:1.55;color:var(--ink-2);margin:0}