/* SalesLogs help centre: article page (screen 1d) and content blocks (1c reference).
   Loaded from Template settings > Custom HTML > Article header.
   Depends on the tokens in kb-theme.css.

   HubSpot renders an article as drag-and-drop rows (title, subtitle, last updated,
   body) nested in wrappers. The wrappers above the rows dissolve (display:contents)
   so the rows become items of one grid on .dnd-column:

     tracks   [content max 760] [gap 96] [rail 280] [rest]
     band     rows before the body span the full width on Light Grey
     main     body rows sit in the content track; kb-article.js adds the
              contents rail (track 3, right) and the metadata panel (band, right)

   Rows are matched by what they contain, not by module number, so the layout holds
   if the template gains or loses a module. */

body:has(.knowledgebase-post){--slkb-band-pad:96px;--slkb-body-gap:96px}

/* ---- Page frame ---- */
body:has(.knowledgebase-post) .hs-kb-search-input-wrapper:not(#main-content *){display:none}
body:has(.knowledgebase-post) .hs-kb-content-wrapper--sidebar{display:block}
body:has(.knowledgebase-post) .hs-kb-content{display:block;padding:0!important;margin:0}
/* The category menu is not part of 1d; the rail replaces it */
body:has(.knowledgebase-post) aside.hs-kb-sidebar{display:none}
body:has(.knowledgebase-post) .hs-kb-breadcrumb-container{padding:48px 0;box-shadow:0 0 0 100vmax var(--sl-light-grey);clip-path:inset(0 -100vmax);background:var(--sl-light-grey)}

body:has(.knowledgebase-post) #hs_focus_mode,
.knowledgebase-post,
.knowledgebase-post .article-wrapper,
.knowledgebase-post .article-wrapper>.row-fluid-wrapper,
.knowledgebase-post .article-wrapper>.row-fluid-wrapper>.row-fluid,
.knowledgebase-post .article-wrapper>.row-fluid-wrapper>.row-fluid>.span12,
.knowledgebase-post .dnd-section,
.knowledgebase-post .dnd-section>.row-fluid{display:contents}
.knowledgebase-post .dnd-column{display:grid;grid-template-columns:minmax(0,760px) 96px 280px minmax(0,1fr);column-gap:0;row-gap:0;align-items:start;width:auto;padding:0}
/* Default: a row belongs to the body */
.knowledgebase-post .dnd-row{grid-column:1;min-width:0}
/* Band rows: the title, the subtitle and anything HubSpot renders above the title
   (Article last updated). Space for the metadata panel is reserved on the right. */
.knowledgebase-post .dnd-row:has(h1),
.knowledgebase-post .dnd-row:has(~.dnd-row h1),
.knowledgebase-post .dnd-row:has(.hs_cos_wrapper>h2.hs_cos_wrapper){grid-column:1/-1;background:var(--sl-light-grey);box-shadow:0 0 0 100vmax var(--sl-light-grey);clip-path:inset(0 -100vmax);padding-right:calc(33.333% + 32px);align-self:stretch}
.knowledgebase-post .dnd-row:has(~.dnd-row h1){padding-bottom:16px}
.knowledgebase-post .dnd-row:has(h1){padding-bottom:24px}
.knowledgebase-post .dnd-row:has(.hs_cos_wrapper>h2.hs_cos_wrapper){padding-bottom:var(--slkb-band-pad)}
/* No subtitle: the title row closes the band */
.knowledgebase-post .dnd-row:has(h1):not(:has(~.dnd-row .hs_cos_wrapper>h2.hs_cos_wrapper)){padding-bottom:var(--slkb-band-pad)}
/* First body row starts 96px below the band */
.knowledgebase-post .dnd-row:has(.hs_cos_wrapper>h2.hs_cos_wrapper)+.dnd-row,
.knowledgebase-post .dnd-row:has(.hs_cos_wrapper>h2.hs_cos_wrapper)+.slkb-meta+.dnd-row,
.knowledgebase-post .dnd-row:has(h1):not(:has(~.dnd-row .hs_cos_wrapper>h2.hs_cos_wrapper))+.dnd-row,
.knowledgebase-post .dnd-row:has(h1):not(:has(~.dnd-row .hs_cos_wrapper>h2.hs_cos_wrapper))+.slkb-meta+.dnd-row{margin-top:var(--slkb-body-gap)}
.knowledgebase-post .dnd-row.slkb-body-first{margin-top:var(--slkb-body-gap)}
.knowledgebase-post .dnd-row:not(:has(~.dnd-row)){padding-bottom:120px}

.knowledgebase-post .hs_cos_wrapper_type_inline_richtext_field,.knowledgebase-post .hs_cos_wrapper_type_rich_text{overflow:visible}

/* Title, subtitle, last updated */
.knowledgebase-post h1{font:400 56px/1.05 var(--font-sans);letter-spacing:-.03em;color:var(--sl-black);margin:0}
.knowledgebase-post h2.hs_cos_wrapper{font:400 20px/1.6 var(--font-sans);color:var(--sl-graphite);max-width:620px;margin:0}
.knowledgebase-post .dnd-row:has(~.dnd-row h1),
.knowledgebase-post .dnd-row:has(~.dnd-row h1) *{font:400 14px/1.4 var(--font-sans);letter-spacing:.02em;color:var(--sl-stone)}
/* Metadata panel (kb-article.js) sits beside the title and subtitle */
.slkb-meta{grid-column:1/-1;justify-self:end;align-self:end;width:calc(33.333% - 16px);box-sizing:border-box;margin-bottom:var(--slkb-band-pad);
  background:#fff;border-radius:var(--radius-card);padding:24px;display:flex;flex-direction:column;gap:16px;position:relative;z-index:1}
.slkb-meta__row{display:flex;justify-content:space-between;gap:16px;font:400 14px/1.4 var(--font-sans);letter-spacing:.02em}
.slkb-meta__row+.slkb-meta__row,.slkb-meta__roles{border-top:1px solid var(--sl-grey);padding-top:16px}
.slkb-meta__row dt,.slkb-meta__roles dt{color:var(--sl-stone)}
.slkb-meta__row dd{margin:0;text-align:right}
.slkb-meta__roles{display:flex;flex-direction:column;gap:10px;margin:0}
.slkb-meta__roles dd{margin:0;display:flex;flex-wrap:wrap;gap:8px}
.slkb-meta dl,.slkb-meta dd{margin:0}

/* ---- Contents rail (kb-article.js): unnumbered H2 list, Example and FAQ tags, feedback ---- */
.slkb-rail{grid-column:3;align-self:stretch;min-width:0;margin-top:var(--slkb-body-gap)}
.slkb-rail__inner{position:sticky;top:24px;display:flex;flex-direction:column;gap:16px}
.slkb-rail__label{margin:0;font:400 12px/1.2 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--sl-stone)}
.slkb-toc,.slkb-toc li{list-style:none!important;margin:0;padding:0}
.slkb-toc{border-top:1px solid var(--sl-black);margin-bottom:16px}
.slkb-toc li::marker{content:none}
.slkb-toc a{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font:400 16px/1.4 var(--font-sans);padding:14px 0 14px 16px;border-bottom:1px solid var(--sl-grey);color:var(--sl-graphite);text-decoration:none;position:relative;transition:color var(--d-base) var(--ease)}
.slkb-toc a::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;background:transparent;transition:background-color var(--d-base) var(--ease)}
.slkb-toc a:hover{color:var(--sl-black)}
.slkb-toc a[aria-current=true]{color:var(--sl-black)}
.slkb-toc a[aria-current=true]::before{background:var(--sl-blue)}
.slkb-toc__tag{font:500 12px/1 var(--font-sans);letter-spacing:.02em;color:var(--sl-blue);background:var(--sl-skywash);border-radius:var(--radius-pill);padding:5px 10px}
/* Sub-headings (H3): under their section, indented and smaller, no divider above */
.slkb-toc .slkb-toc__sub a{padding:0 0 12px 32px;margin-top:-6px;font-size:14px;line-height:1.4;color:var(--sl-stone)}
.slkb-toc .slkb-toc__sub a::before{left:16px;top:0;bottom:12px}
.slkb-toc li:has(+ .slkb-toc__sub) > a{border-bottom:0}
.slkb-toc .slkb-toc__sub a{border-bottom:0}
.slkb-toc .slkb-toc__sub:not(:has(+ .slkb-toc__sub)) a{border-bottom:1px solid var(--sl-grey);padding-bottom:14px}
.slkb-toc .slkb-toc__sub a:hover,.slkb-toc .slkb-toc__sub a[aria-current=true]{color:var(--sl-black)}
/* FAQ link stands apart at the end of the list */
.slkb-toc .slkb-toc__faq a{margin-top:16px;border:0;border-radius:var(--radius-card);background:var(--sl-light-grey);padding:16px;color:var(--sl-black)}
.slkb-toc .slkb-toc__faq a::before{display:none}
.slkb-toc .slkb-toc__faq a[aria-current=true]{box-shadow:inset 0 0 0 1px var(--sl-blue)}
.slkb-toc .slkb-toc__faq .slkb-toc__tag{background:#fff}
/* Back to top (kb-article.js): in the rail once scrolled; at the end of the article on narrow screens */
.slkb-top{display:inline-flex;align-items:center;gap:8px;font:500 14px/1.4 var(--font-sans);color:var(--sl-blue);text-decoration:none;transition:color var(--d-base) var(--ease),opacity var(--d-base) var(--ease)}
.slkb-top::before{content:"";width:7px;height:7px;border-left:2px solid currentColor;border-top:2px solid currentColor;transform:translateY(2px) rotate(45deg)}
.slkb-top:hover{color:var(--sl-blue-water)}
.slkb-top--rail{opacity:0;visibility:hidden;margin-top:-8px}
html.slkb-scrolled .slkb-top--rail{opacity:1;visibility:visible}
.knowledgebase-post .dnd-row .slkb-top--end{display:none}


/* ---- Feedback (HubSpot widget), restyled; moved into the rail by kb-article.js ---- */
.kb-body-wrapper .hs-kb-feedback{margin:0}
.kb-body-wrapper #ka-feedback-form{margin:0;width:auto}
.kb-body-wrapper #ka-feedback-form section{display:block}
.kb-body-wrapper #ka-feedback-rating-input-wrapper,
.kb-body-wrapper #ka-feedback-post-submit-message{border:0!important;padding:0!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:16px!important}
.kb-body-wrapper .ka-feedback-rating-question,.kb-body-wrapper .ka-feedback-rating-buttons{margin:0!important;width:auto}
.kb-body-wrapper .ka-feedback-label-light,.kb-body-wrapper .ka-feedback-label{font:400 16px/1.4 var(--font-sans)!important;color:var(--sl-black)}
.kb-body-wrapper #ka-feedback-post-submit-message-text,.kb-body-wrapper #ka-feedback-email-submitted-message-text{line-height:1.6!important}
.kb-body-wrapper .ka-feedback-rating-buttons{display:flex!important;gap:8px!important}
.kb-body-wrapper #ka-feedback-form button{height:auto;width:auto!important;min-width:64px;margin:0!important;padding:12px 20px;border:0;border-radius:var(--radius-pill);
  background:#fff;color:var(--sl-blue);box-shadow:inset 0 0 0 1px var(--sl-blue);font:500 14px/1 var(--font-sans);cursor:pointer;transition:background-color var(--d-base) var(--ease),color var(--d-base) var(--ease),box-shadow var(--d-base) var(--ease)}
.kb-body-wrapper #ka-feedback-form button span{font:inherit!important;line-height:1!important}
.kb-body-wrapper #ka-feedback-form button:hover{background:var(--sl-blue-water);color:#fff;box-shadow:inset 0 0 0 1px var(--sl-blue-water)}
.kb-body-wrapper #ka-feedback-form button.disabled{opacity:.45;cursor:not-allowed}
.kb-body-wrapper #ka-feedback-email-input{height:44px;border:1px solid var(--sl-mist);border-radius:var(--radius-input);background:#fff;padding:0 16px;font:400 16px/1 var(--font-sans)!important;color:var(--sl-black)}
.slkb-rail .hs-kb-feedback{background:var(--sl-light-grey);border-radius:var(--radius-card);padding:24px}
/* Feedback left under the article (no script): keep it inside the content track */
.hs-kb-content>.hs-kb-feedback{max-width:760px;margin:0;padding:24px;background:var(--sl-light-grey);border-radius:var(--radius-card)}

/* ---- Related articles: HubSpot list restyled as the 4-across row ---- */
.kb-body-wrapper .hs-kb-related-articles{margin:0;padding:96px 0;position:relative}
.kb-body-wrapper .hs-kb-related-articles::before{content:"";position:absolute;top:-1px;left:-100vmax;right:-100vmax;border-top:1px solid var(--sl-grey)}
.kb-body-wrapper #kb-related-articles-container{margin:0;padding:0}
.kb-body-wrapper #kb-related-articles h3{font:400 32px/1.2 var(--font-sans);margin:0 0 32px}
.kb-body-wrapper #kb-related-articles ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.kb-body-wrapper #kb-related-articles li{margin:0;padding:0}
.kb-body-wrapper #kb-related-articles li:nth-child(n+5){display:none}
.kb-body-wrapper #kb-related-articles a{height:100%;min-height:160px;box-sizing:border-box;display:flex!important;flex-direction:column;gap:12px;padding:32px!important;border-radius:var(--radius-card);box-shadow:inset 0 0 0 1px var(--sl-grey);font:400 22px/1.3 var(--font-sans)!important;color:var(--sl-black)!important;transition:color var(--d-base) var(--ease)}
.kb-body-wrapper #kb-related-articles a:hover{color:var(--sl-blue)!important}
.kb-body-wrapper #kb-related-articles .slkb-related-cat{font:400 14px/1.4 var(--font-sans);letter-spacing:.02em;color:var(--sl-stone)}
.kb-body-wrapper .hs-kb-related-articles:not(:has(li)){display:none}

/* ---- Bottom CTA (kb-article.js) ---- */
.slkb-article-cta{background:var(--sl-black)}
.slkb-article-cta .slkb-cta{padding-left:0;padding-right:0}

/* =========================================================================
   CONTENT BLOCKS (ARTICLE_SPEC section 3). Scoped to the article body.
   ========================================================================= */
.knowledgebase-post .dnd-row{font:400 18px/1.7 var(--font-sans);color:var(--sl-graphite)}
.knowledgebase-post .dnd-row :where(p){margin:0 0 24px}
.knowledgebase-post .dnd-row :where(h2:not(.hs_cos_wrapper)){font:400 32px/1.2 var(--font-sans);color:var(--sl-black);margin:56px 0 24px;scroll-margin-top:24px}
.knowledgebase-post .dnd-row :where(h2:not(.hs_cos_wrapper)):first-child{margin-top:0}
.knowledgebase-post .dnd-row :where(h3){font:400 22px/1.3 var(--font-sans);color:var(--sl-black);margin:40px 0 16px}
.knowledgebase-post .dnd-row :where(h4){font:500 18px/1.4 var(--font-sans);color:var(--sl-black);margin:32px 0 12px}
.knowledgebase-post .dnd-row :where(h2,h3) strong{font-weight:inherit}
.knowledgebase-post .dnd-row :where(strong,b){font-weight:500;color:var(--sl-black)}
.knowledgebase-post .dnd-row :where(a){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.knowledgebase-post .dnd-row :where(hr){display:none}
.knowledgebase-post .dnd-row :where(img){max-width:100%;height:auto}

/* Lists */
.knowledgebase-post .dnd-row :where(ul,ol){margin:0 0 24px;padding:0 0 0 24px}
.knowledgebase-post .dnd-row :where(li){margin:0 0 8px;padding:0}
.knowledgebase-post .dnd-row ul{list-style:disc}
.knowledgebase-post .dnd-row ul li::marker{color:var(--sl-stone)}
/* Steps (kb-article.js wraps each top-level numbered list in a "Steps" card).
   The number is positioned, not a grid column, so inline text and bold labels stay on one line. */
.knowledgebase-post .dnd-row .slkb-steps{margin:0 0 32px;border:1px solid var(--sl-grey);border-radius:var(--radius-card);background:#fff;overflow:hidden}
.knowledgebase-post .dnd-row .slkb-steps__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:14px 24px;background:var(--sl-light-grey);border-bottom:1px solid var(--sl-grey)}
.knowledgebase-post .dnd-row .slkb-steps__label{font:400 12px/1.2 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--sl-black)}
.knowledgebase-post .dnd-row .slkb-steps__count{font:400 14px/1.2 var(--font-sans);color:var(--sl-stone);margin-right:auto;margin-left:12px}
/* Watch / Try it (kb-article.js): open this task's example */
.knowledgebase-post .dnd-row .slkb-steps__actions{display:flex;gap:8px}
.knowledgebase-post .dnd-row .slkb-steps__btn{display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 14px;border:0;border-radius:var(--radius-pill);background:#fff;box-shadow:inset 0 0 0 1px var(--sl-blue);
  font:500 13px/1 var(--font-sans);color:var(--sl-blue);cursor:pointer;transition:background-color var(--d-base) var(--ease),color var(--d-base) var(--ease),box-shadow var(--d-base) var(--ease)}
.knowledgebase-post .dnd-row .slkb-steps__btn:hover,.knowledgebase-post .dnd-row .slkb-steps__btn[aria-expanded=true]{background:var(--sl-blue);color:#fff}
.knowledgebase-post .dnd-row .slkb-steps__btn:focus-visible{outline:2px solid var(--sl-blue);outline-offset:2px}
/* Play triangle and pointer drawn in CSS (the design system has no icons for these) */
.knowledgebase-post .dnd-row .slkb-steps__btn--watch::before{content:"";width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
.knowledgebase-post .dnd-row .slkb-steps__btn--try::before{content:"";width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 2px currentColor}
.knowledgebase-post .dnd-row ol:not(li ol){counter-reset:slkb-step;list-style:none;padding:0;margin:0 0 32px}
.knowledgebase-post .dnd-row .slkb-steps ol{margin:0}
.knowledgebase-post .dnd-row ol:not(li ol)>li{counter-increment:slkb-step;position:relative;display:block;padding:20px 24px 20px 72px;margin:0;border-top:1px solid var(--sl-grey);font:400 17px/1.6 var(--font-sans);color:var(--sl-black);list-style:none}
.knowledgebase-post .dnd-row ol:not(li ol)>li:first-child{border-top:0}
.knowledgebase-post .dnd-row ol:not(li ol)>li::before{content:counter(slkb-step);position:absolute;left:24px;top:18px;width:30px;height:30px;border-radius:50%;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;font:500 14px/1 var(--font-sans);color:var(--sl-blue);box-shadow:inset 0 0 0 1px var(--sl-blue)}
.knowledgebase-post .dnd-row ol:not(li ol)>li>p:last-child,.knowledgebase-post .dnd-row ol:not(li ol)>li>figure:last-child{margin-bottom:0}
.knowledgebase-post .dnd-row li :where(ol){list-style:lower-alpha;margin:12px 0 0;padding-left:24px}
.knowledgebase-post .dnd-row li :where(ul){margin:12px 0 0}

/* Callouts: spec classes, plus HubSpot's own callout classes from the editor */
.knowledgebase-post .kb-callout,
.knowledgebase-post [class*=hs-callout-type-]{display:flex;flex-direction:column;gap:8px;margin:0 0 32px;padding:24px 28px;border:0;border-radius:var(--radius-card);font:400 16px/1.6 var(--font-sans);color:var(--sl-black);width:auto;clear:both}
.knowledgebase-post .kb-callout::before,
.knowledgebase-post [class*=hs-callout-type-]::before{font:400 12px/1.2 var(--font-sans);letter-spacing:.12em;text-transform:uppercase}
.knowledgebase-post [class*=hs-callout-type-]::after{display:none}
.knowledgebase-post .kb-callout p,.knowledgebase-post [class*=hs-callout-type-] p{margin:0;font:inherit;color:inherit}
.knowledgebase-post .kb-callout--note,.knowledgebase-post .hs-callout-type-note,.knowledgebase-post .hs-callout-type-tip{background:var(--sl-skywash)}
.knowledgebase-post .kb-callout--note::before,.knowledgebase-post .hs-callout-type-note::before,.knowledgebase-post .hs-callout-type-tip::before{content:"Note";color:var(--sl-blue)}
.knowledgebase-post .kb-callout--important,.knowledgebase-post .hs-callout-type-caution,.knowledgebase-post .hs-callout-type-warning{background:var(--sl-sand)}
.knowledgebase-post .kb-callout--important::before,.knowledgebase-post .hs-callout-type-caution::before,.knowledgebase-post .hs-callout-type-warning::before{content:"Important";color:var(--sl-black)}
/* kb-article.js moves a bold lead-in ("Before you start:") into the label */
.knowledgebase-post .kb-callout[data-label]::before{content:attr(data-label)}

/* Figures and screenshots (1d: Light Grey mat) */
.knowledgebase-post .dnd-row figure{margin:0 0 40px;display:flex;flex-direction:column;gap:12px}
.knowledgebase-post .dnd-row figure>img,
.knowledgebase-post .dnd-row figure>a>img,
.knowledgebase-post .dnd-row figure>picture{display:block;width:100%;height:auto;border-radius:var(--radius-card);border:1px solid var(--sl-grey);box-sizing:border-box;background:#fff;margin:0}
.knowledgebase-post .dnd-row figure:has(>img,>a>img,>picture){background:var(--sl-light-grey);border-radius:var(--radius-panel);padding:32px 32px 20px}
.knowledgebase-post .dnd-row figcaption{font:400 14px/1.4 var(--font-sans);letter-spacing:.02em;color:var(--sl-stone)}
.knowledgebase-post .dnd-row p>img:only-child{display:block;border-radius:var(--radius-card);border:1px solid var(--sl-grey)}
/* Video: 16:9, 16px radius */
.knowledgebase-post .dnd-row :where(iframe[src*=youtube],iframe[src*=vimeo],iframe[src*=loom],iframe[src*=wistia],video){display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:var(--radius-panel);background:var(--sl-black)}
.knowledgebase-post .dnd-row figure:has(iframe,video){background:none;padding:0;margin-right:0}
.knowledgebase-post .dnd-row .hs-responsive-embed-wrapper{border-radius:var(--radius-panel);overflow:hidden}
/* Examples (Tango). kb-article.js turns a Tango's two embeds into one "Example" card:
   "See it in action" (narrated video) then "Try it yourself" (interactive, loaded on request).
   Without JavaScript the two embeds stack. */
.knowledgebase-post .dnd-row iframe[src*="tango.us/app/embed"],
.knowledgebase-post .dnd-row iframe[data-src*="tango.us/app/embed"]{display:block;width:100%;height:640px;min-height:0!important;border:0;border-radius:var(--radius-card);background:#fff;margin:0 0 24px}
.knowledgebase-post .dnd-row iframe[src*="tango.us/app/embed/video"]{height:auto;aspect-ratio:16/9;background:#251f2d}
.knowledgebase-post .dnd-row .slkb-example{margin:0 0 48px;padding:28px 32px 32px;background:var(--sl-light-grey);border-radius:var(--radius-panel);display:flex;flex-direction:column;gap:28px}
.knowledgebase-post .dnd-row .slkb-example__head{display:flex;flex-direction:column;gap:8px}
.knowledgebase-post .dnd-row .slkb-example__eyebrow{font:400 12px/1.2 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--sl-blue)}
.knowledgebase-post .dnd-row .slkb-example__title{margin:0;font:400 22px/1.3 var(--font-sans);color:var(--sl-black)}
.knowledgebase-post .dnd-row .slkb-example__part{display:flex;flex-direction:column;gap:8px}
.knowledgebase-post .dnd-row .slkb-example__part+.slkb-example__part{border-top:1px solid var(--sl-grey);padding-top:28px}
.knowledgebase-post .dnd-row .slkb-example__label{margin:0;font:500 18px/1.3 var(--font-sans);color:var(--sl-black)}
.knowledgebase-post .dnd-row .slkb-example__desc{margin:0 0 8px;font:400 15px/1.5 var(--font-sans);color:var(--sl-graphite)}
.knowledgebase-post .dnd-row .slkb-example__frame iframe{margin:0}
.knowledgebase-post .dnd-row .slkb-example__frame--interactive iframe{background:rgb(9,3,15)}
/* Covers Tango's "Open in new tab" button (kb-article.js). Same colour as Tango's control bar. */
.knowledgebase-post .dnd-row .slkb-example__frame--video,.knowledgebase-post .dnd-row .slkb-example__frame--interactive{position:relative}
.knowledgebase-post .dnd-row .slkb-example__mask{position:absolute;right:8px;bottom:4px;width:44px;height:44px;border-radius:10px;background:#251f2d;z-index:1}
/* Interactive: "View on Tango.ai" sits 16px in from the top right (26px down on the cover) */
.knowledgebase-post .dnd-row .slkb-example__mask--top{top:8px;bottom:auto;right:8px;width:36px;height:50px;border-radius:8px;background:rgb(9,3,15)}
.knowledgebase-post .dnd-row .slkb-example__frame[hidden]{display:none}
.knowledgebase-post .dnd-row .slkb-example__start{align-self:flex-start;margin:4px 0 0}
/* "Prefer to watch?" card under the intro (articles with one example) */
.knowledgebase-post .dnd-row .slkb-example--intro{margin:8px 0 56px}
/* Panel under a Steps card (articles with several examples) */
.knowledgebase-post .dnd-row .slkb-example--panel{margin:-16px 0 40px;padding:16px 20px 20px;gap:12px}
.knowledgebase-post .dnd-row .slkb-example--panel[hidden]{display:none}
.knowledgebase-post .dnd-row .slkb-example__bar{display:flex;justify-content:space-between;align-items:center;gap:16px}
.knowledgebase-post .dnd-row .slkb-example__close{background:none;border:0;padding:4px 0;font:500 14px/1 var(--font-sans);color:var(--sl-blue);cursor:pointer}
.knowledgebase-post .dnd-row .slkb-example__close:hover{color:var(--sl-blue-water)}
/* Placeholder left by the builder until the Tango is recorded: visible in the HubSpot
   editor (which does not load this file), never on the live page */
.knowledgebase-post .kb-example-placeholder,.knowledgebase-post .kb-tango-placeholder{display:none!important}

/* FAQ panel (kb-article.js wraps the "Frequently asked questions" H2 and its toggles) */
.knowledgebase-post .dnd-row .slkb-faq{margin:64px 0 0;padding:40px;background:var(--sl-skywash);border-radius:var(--radius-panel)}
.knowledgebase-post .dnd-row .slkb-faq>h2{margin:0 0 24px!important}
.knowledgebase-post .dnd-row .slkb-faq details{background:#fff}

/* Tables */
.knowledgebase-post .dnd-row table{width:100%;border-collapse:collapse;margin:0 0 32px;font:400 16px/1.6 var(--font-sans);color:var(--sl-black);border:0}
.knowledgebase-post .dnd-row th,.knowledgebase-post .dnd-row thead td{font:500 14px/1.4 var(--font-sans);text-align:left;padding:12px 16px 12px 0;border:0;border-bottom:1px solid var(--sl-mist);background:none}
.knowledgebase-post .dnd-row td{padding:16px 16px 16px 0;border:0;border-bottom:1px solid var(--sl-grey);vertical-align:top;background:none}
.knowledgebase-post .dnd-row .slkb-table-scroll{overflow-x:auto;margin:0 0 32px}
.knowledgebase-post .dnd-row .slkb-table-scroll table{margin:0}

/* Code (API requests). kb-article.js adds the header row with Copy. */
.knowledgebase-post .dnd-row pre{position:relative;margin:0 0 32px;padding:20px 24px;background:var(--sl-black);border:0;border-radius:var(--radius-card);overflow:auto;color:#fff;font:400 14px/1.7 var(--font-mono)}
.knowledgebase-post .dnd-row pre code{background:none;border:0;padding:0;color:inherit;font:inherit}
.knowledgebase-post .dnd-row :not(pre)>code{font:400 .875em/1 var(--font-mono);background:var(--sl-light-grey);border:0;border-radius:4px;padding:2px 6px;color:var(--sl-black)}
.slkb-code{margin:0 0 32px;background:var(--sl-black);border-radius:var(--radius-card);overflow:hidden}
.slkb-code__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid #3F3F3F;font:500 13px/1.4 var(--font-sans);color:rgba(255,255,255,.7)}
.slkb-code__bar button{background:none;border:0;padding:0;font:500 13px/1 var(--font-sans);color:rgba(255,255,255,.7);cursor:pointer;transition:color var(--d-base) var(--ease)}
.slkb-code__bar button:hover{color:var(--sl-blue-water)}
.slkb-code pre{margin:0!important;border-radius:0!important;padding:20px!important}

/* FAQ: <details><summary> (1d: Light Grey cards, plus/minus drawn from 2px bars) */
.knowledgebase-post .dnd-row details{background:var(--sl-light-grey);border-radius:var(--radius-card);margin:0 0 12px;padding:0}
.knowledgebase-post .dnd-row summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px;font:400 18px/1.4 var(--font-sans);color:var(--sl-black)}
.knowledgebase-post .dnd-row summary::-webkit-details-marker{display:none}
.knowledgebase-post .dnd-row summary::after{content:"";flex:none;width:14px;height:14px;
  background:linear-gradient(var(--sl-black),var(--sl-black)) center/14px 2px no-repeat,linear-gradient(var(--sl-black),var(--sl-black)) center/2px 14px no-repeat;transition:background-size var(--d-base) var(--ease)}
.knowledgebase-post .dnd-row details[open]>summary::after{background-size:14px 2px,2px 0}
.knowledgebase-post .dnd-row details>:not(summary){margin:0;padding:0 24px 24px;font:400 16px/1.6 var(--font-sans);color:var(--sl-graphite)}
.knowledgebase-post .dnd-row details>p+p{padding-top:0;margin-top:-12px}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:1199px){
  .knowledgebase-post .dnd-column{grid-template-columns:minmax(0,1fr) 56px 240px 0}
  .knowledgebase-post .dnd-row figure,.knowledgebase-post .dnd-row .slkb-example,.knowledgebase-post .dnd-row .slkb-faq{margin-right:0}
  .kb-body-wrapper #kb-related-articles ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
  .knowledgebase-post .dnd-row:has(h1),
  .knowledgebase-post .dnd-row:has(~.dnd-row h1),
  .knowledgebase-post .dnd-row:has(.hs_cos_wrapper>h2.hs_cos_wrapper){padding-right:0}
  /* Panel drops under the subtitle, still on the grey band */
  .knowledgebase-post .dnd-row:has(.hs_cos_wrapper>h2.hs_cos_wrapper){padding-bottom:24px}
  .slkb-meta{grid-row:auto!important;justify-self:stretch;width:auto;margin:0 0 var(--slkb-band-pad);
    box-shadow:0 0 0 100vmax var(--sl-light-grey);clip-path:inset(0 -100vmax calc(-1 * var(--slkb-band-pad)))}
  .knowledgebase-post .dnd-column{grid-template-columns:minmax(0,1fr)}
  .knowledgebase-post .dnd-row,.slkb-rail{grid-column:1}
  .slkb-rail{grid-row:auto!important;margin-top:var(--slkb-body-gap)}
  .knowledgebase-post .dnd-row.slkb-body-first{margin-top:40px}
  .slkb-rail__inner{position:static}
  .slkb-top--rail{display:none}
  .knowledgebase-post .dnd-row .slkb-top--end{display:inline-flex;margin-top:40px;text-decoration:none}
}
@media (max-width:767px){
  body:has(.knowledgebase-post){--slkb-band-pad:56px;--slkb-body-gap:56px}
  .knowledgebase-post h1{font-size:40px;line-height:1.1}
  .knowledgebase-post .dnd-row .slkb-example{padding:20px 16px 24px}
  .knowledgebase-post .dnd-row .slkb-example__start{align-self:stretch}
  .knowledgebase-post .dnd-row iframe[src*="tango.us/app/embed"]:not([src*="/video/"]){height:560px}
  .knowledgebase-post .dnd-row .slkb-faq{padding:24px 16px}
  .knowledgebase-post .dnd-row ol:not(li ol)>li{padding:16px 16px 16px 60px}
  .knowledgebase-post .dnd-row ol:not(li ol)>li::before{left:16px;top:15px}
  .knowledgebase-post .dnd-row .slkb-steps__head{padding:12px 16px}
  .knowledgebase-post .dnd-row figure:has(>img,>a>img,>picture){padding:16px 16px 12px}
  .kb-body-wrapper #kb-related-articles ul{grid-template-columns:1fr}
  .kb-body-wrapper .hs-kb-related-articles{padding:56px 0}
}
@media print{
  .slkb-rail,.slkb-meta,.hs-kb-related-articles,.slkb-article-cta,.kb-body-wrapper .header,.kb-body-wrapper .footer{display:none!important}
  .knowledgebase-post .dnd-column{display:block}
}