/* Slack page. Layout follows the company homepage through shared tokens and ui-kit primitives.
   Loaded after templates.css on /slack/ only. Product illustrations sit at the end of this file. */

/* Header over the gradient hero: transparent, then frosted once the hero title scrolls under it. */
.site-v2.tpl-overlay-header{padding-top:0}
.tpl-overlay-header .toyo-site-header:not(.is-scrolled)::before{opacity:0}
.tpl-overlay-header .toyo-site-header:not(.is-scrolled) .toyo-site-nav img{filter:brightness(0) invert(1)}
.tpl-overlay-header .toyo-site-header:not(.is-scrolled) .toyo-site-links>a{color:#fff}
.tpl-overlay-header .toyo-site-header:not(.is-scrolled) .toyo-site-links>a:hover{background:#ffffff1a}
.tpl-overlay-header .toyo-site-header:not(.is-scrolled) .sl-jump{display:none}
/* Like the homepage, the hero is the first thing on the page: no review bar or breadcrumb above it. */
.tpl-overlay-header :is(.wf-review,.wf-breadcrumb,.wf-source-note){display:none}

/* On-page navigation, revealed with the frosted header. */
.tpl-slack .sl-jump{display:flex;align-items:center;gap:32px;box-sizing:border-box;width:100%;max-width:none;height:48px;margin:0;padding:0 max(var(--site-gutter),calc((100% - var(--site-content-width)) / 2 + var(--site-gutter)));border-top:1px solid var(--site-nav-border);font-size:13px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.tpl-slack .sl-jump::-webkit-scrollbar{display:none}
.tpl-slack .sl-jump a{flex-shrink:0;padding:10px 0;color:var(--site-color-muted);text-decoration:none;transition:color var(--site-motion-fast)}
.tpl-slack .sl-jump a:hover{color:var(--site-color-ink)}

/* Shared rhythm: paper and band sections alternate, as on the homepage. */
.tpl-slack :where(.slack-page) :where(p,h1,h2,h3,ol,ul,blockquote,figure){margin:0}
.tpl-slack :where(.slack-page) :where(button){padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.tpl-slack .slack-page .container{width:calc(100% - 2 * var(--site-gutter));max-width:var(--site-inner-width);margin-inline:auto}
.tpl-slack .sl-section{padding-block:var(--site-section-space);border-top:1px solid var(--site-color-line);background:var(--site-color-paper);scroll-margin-top:calc(var(--site-nav-height) + 48px)}
.tpl-slack :is(#use-cases,#brain,#permissions-and-data){background:var(--site-color-band)}
.tpl-slack .slack-page h2{font:600 var(--site-heading-size)/var(--site-heading-leading) var(--site-font-heading);letter-spacing:var(--site-heading-tracking);max-width:600px}
.tpl-slack .slack-page h3{font:600 var(--site-subheading-size)/1.3 var(--site-font-heading);letter-spacing:-.02em}
.tpl-slack .slack-page p{font-size:var(--site-body-size);line-height:var(--site-body-leading);color:var(--site-color-muted)}
.tpl-slack .slack-page a:not(.button){color:inherit}
.tpl-slack .sl-card-label{display:block;margin-bottom:14px;font:11px/1.4 var(--site-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--site-color-muted)}

/* Split section introduction: heading left, supporting copy right. */
.tpl-slack .sl-heading{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--site-section-gap);align-items:start;margin-bottom:var(--site-section-gap)}
.tpl-slack .sl-heading>.sl-kicker{grid-column:1/-1}
.tpl-slack .sl-heading>h2{grid-column:1}
.tpl-slack .sl-heading>p{grid-column:2}

/* Hero on the shared animated gradient. */
.tpl-slack .sl-hero{padding:180px 0 96px;border-top:0;color:#fff;text-align:left}
.tpl-slack .sl-hero .hero-copy{width:calc(100% - 2 * var(--site-gutter));max-width:var(--site-inner-width);margin-inline:auto}
.tpl-slack .sl-hero .sl-light{gap:8px;color:#fff;border-color:#ffffffa0;background:#ffffff26}
.tpl-slack .sl-hero .tool-logo{width:14px;height:14px}
.tpl-slack .sl-hero h1{max-width:820px;margin:0 0 14px;font:600 var(--site-hero-size)/var(--site-hero-leading) var(--site-font-heading);letter-spacing:-.025em;color:#fff}
.tpl-slack .site-marker-ink{display:none}
.tpl-slack .site-marker-filter{position:absolute}
.tpl-slack .sl-hero .lead{max-width:650px;font-size:clamp(16px,1.5vw,20px);line-height:1.5;color:#fff}
.tpl-slack .sl-hero .button-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.tpl-slack .sl-hero .button svg{flex-shrink:0}
.tpl-slack .sl-hero.sl-hero{padding-bottom:0;overflow:hidden}
/* Dark fallback beneath the embedded gradient. */
.tpl-slack .sl-hero-dark{position:relative;background:var(--site-color-dark)}
.tpl-slack .sl-hero-dark .sl-hero-demo .sl-window{border-color:#ffffff26;box-shadow:0 30px 80px -30px #000}
/* The mock-up runs past the bottom of the hero, which crops it. */
.tpl-slack .sl-hero-demo{margin-top:64px;margin-bottom:-120px}
.tpl-slack .sl-hero-demo .sl-window-body{min-height:560px}
.tpl-slack .sl-hero-demo .sl-window{border-color:#ffffff80;box-shadow:0 30px 80px -30px #3c1e0a73}

/* How it works: the homepage's joined three-step card. */
.tpl-slack .sl-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;list-style:none;border:1px solid var(--site-color-line);border-radius:var(--site-radius-card);background:var(--site-color-paper);overflow:hidden}
.tpl-slack .sl-steps li{padding:var(--site-card-space)}
.tpl-slack .sl-steps li+li{border-left:1px solid var(--site-color-line)}
.tpl-slack .sl-steps h3{margin-bottom:10px}
.tpl-slack .site-pillar-icon{display:none}
.tpl-slack .sl-step-number{display:inline-grid;place-items:center;width:var(--site-icon-size);height:var(--site-icon-size);margin-bottom:18px;border-radius:50%;background:var(--site-palette-mint);font:700 15px/1 var(--site-font-mono);color:#fff}
.tpl-slack .sl-steps li:nth-child(2) .sl-step-number{background:var(--site-palette-blue)}
.tpl-slack .sl-steps li:nth-child(3) .sl-step-number{background:var(--site-palette-orange)}

/* Use cases: joined card grid with expandable prompts. */
.tpl-slack .sl-proactive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--site-color-line);border-radius:var(--site-radius-card);background:var(--site-color-surface);overflow:hidden}
.tpl-slack .sl-usecase{display:flex;flex-direction:column;min-width:0;padding:0}
.tpl-slack .sl-usecase+.sl-usecase{border-left:1px solid var(--site-color-line)}
.tpl-slack .sl-usecase h3{margin-bottom:10px}
.tpl-slack .sl-usecase>p{margin-bottom:24px}
.tpl-slack .sl-usecase .sl-prompt{margin-top:auto}
.tpl-slack .sl-usecase:nth-child(1){--ui-tone-soft:var(--site-palette-mint-soft)}
.tpl-slack .sl-usecase:nth-child(2){--ui-tone-soft:var(--site-palette-blue-soft)}
.tpl-slack .sl-usecase:nth-child(3){--ui-tone-soft:var(--site-palette-lavender-soft)}

/* Disclosure rows: + turns to ×, eased, no spring. */
.tpl-slack .sl-prompt{padding-top:16px;border-top:1px solid var(--site-color-line)}
.tpl-slack :is(.sl-prompt,.sl-faq details,.sl-policy-draft,.sl-review-detail)>summary{list-style:none;cursor:pointer}
.tpl-slack summary::-webkit-details-marker{display:none}
.tpl-slack :is(.sl-prompt,.sl-faq details)>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:600;font-size:13px;color:var(--site-color-ink)}
.tpl-slack :is(.sl-prompt,.sl-faq details)>summary>span[aria-hidden]{font-size:18px;font-weight:400;line-height:1;color:var(--site-color-muted);transition:transform var(--site-motion-normal) ease}
.tpl-slack :is(.sl-prompt,.sl-faq details)[open]>summary>span[aria-hidden]{transform:rotate(45deg)}
.tpl-slack .sl-prompt blockquote{margin:14px 0 10px;padding:14px 16px;border-radius:12px;background:var(--ui-tone-soft,var(--site-color-band));font-size:14px;line-height:1.6;color:var(--site-color-ink)}
.tpl-slack .sl-prompt blockquote+blockquote{margin-top:8px}
.tpl-slack .sl-prompt>p{font-size:13px;line-height:1.6}

/* Feature list: copy and illustration side by side, alternating sides down the page.
   Order: lead research (copy left), sales calls (copy right), ask in thread (copy left), Brain (copy right). */
.tpl-slack .sl-followthrough{display:grid;gap:96px}
.tpl-slack :is(.sl-story,.sl-ondemand,.sl-brain-layout){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px;align-items:center}
.tpl-slack .sl-ondemand{margin-top:96px}
.tpl-slack :is(.sl-story-copy,.sl-product-copy){min-width:0}
.tpl-slack .sl-story-copy h3{margin-bottom:12px;font-size:26px;line-height:1.2}
.tpl-slack .sl-product-copy h2{font-size:26px;line-height:1.2;margin-bottom:12px}
.tpl-slack .sl-product-copy p+p{margin-top:12px}
.tpl-slack .sl-story-copy .sl-prompt{margin-top:24px}
.tpl-slack :is(.sl-story-visual,.sl-product-preview,.sl-brain-stage){min-width:0;padding:40px;border-radius:var(--site-radius-card);background:var(--site-palette-blue-soft)}
.tpl-slack .sl-story:nth-child(2) .sl-story-visual{background:var(--site-palette-orange-soft)}
.tpl-slack .sl-product-preview{background:var(--site-palette-lavender-soft)}
.tpl-slack .sl-brain-stage{background:var(--site-palette-mint-soft)}
.tpl-slack .sl-story-visual>.sl-window,.tpl-slack .sl-product-preview>.sl-window{width:100%;margin:0}
/* Illustrations overhang the content column on their outer side, like homepage cards,
   so copy keeps the text edge and the mock-ups get more room. */
.tpl-slack :is(.sl-story:nth-child(odd) .sl-story-visual,.sl-product-preview){margin-right:calc(-1 * var(--site-card-outset));padding:32px}
.tpl-slack :is(.sl-story:nth-child(2) .sl-story-visual,.sl-brain-layout>.sl-brain-stage){margin-left:calc(-1 * var(--site-card-outset));padding:32px}
/* Every second row puts the illustration first. */
.tpl-slack .sl-story:nth-child(2){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.tpl-slack .sl-story:nth-child(2) .sl-story-visual{order:-1}
.tpl-slack .sl-brain-layout{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.tpl-slack .sl-brain-layout>.sl-brain-stage{order:-1}
.tpl-slack .sl-brain-layout p{margin-top:16px}
.tpl-slack .sl-brain-layout .site-pillar-icon{display:none}
.tpl-slack .sl-brain-stage>.sl-demo-caption{text-align:center}
.tpl-slack .sl-product-copy{align-self:end}
.tpl-slack .sl-product-preview{grid-column:2;grid-row:1/span 2}
.tpl-slack .sl-ondemand>.sl-more-questions{grid-column:1;grid-row:2;align-self:start;margin-top:24px}
.tpl-slack .sl-examples-note,.tpl-slack .sl-demo-caption{margin-top:14px;font-size:12px}

/* Release caveats: one quiet, consistent review marker. */
.tpl-slack .sl-review-detail{margin-top:20px;padding-top:14px;border-top:1px solid var(--site-color-line);font-size:13px}
.tpl-slack .sl-review-detail>summary{display:inline-flex;align-items:center;gap:8px;color:var(--site-color-muted)}
.tpl-slack .sl-review-detail>summary::before,.tpl-slack .sl-faq-pending::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--site-palette-yellow)}
.tpl-slack .sl-review-detail>p{margin-top:8px;font-size:13px}

/* Getting started: two cards. */
.tpl-slack .sl-setup-grid{display:grid;grid-template-columns:1fr;gap:24px}
.tpl-slack .sl-setup-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
.tpl-slack .sl-setup-grid>:is(div,aside){padding:36px;border:1px solid var(--site-color-line);border-radius:var(--site-radius-card);background:var(--site-color-paper)}
.tpl-slack .sl-setup-grid>aside{background:var(--site-color-band)}
.tpl-slack .sl-setup-grid h3{margin-bottom:10px}
.tpl-slack .sl-setup-steps{margin:24px 0 28px;padding:0;list-style:none;counter-reset:setup}
.tpl-slack .sl-setup-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;padding:14px 0;border-top:1px solid var(--site-color-line)}
.tpl-slack .sl-setup-steps li::before{counter-increment:setup;content:counter(setup);grid-row:span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--site-palette-blue);font:700 12px/1 var(--site-font-mono);color:#fff}
.tpl-slack .sl-setup-steps p{font-size:14px}
.tpl-slack .sl-requirements{margin-top:14px;font-size:12px}
.tpl-slack .text-link{margin-top:20px;padding:0;border:0;background:none;font-weight:600;color:var(--site-color-ink);cursor:pointer;transition:color var(--site-motion-fast)}
.tpl-slack .text-link:hover{color:var(--site-palette-blue)}

/* Access and data: intro beside a stack of fact cards. */
.tpl-slack .sl-facts-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.tpl-slack .sl-facts-layout>div:first-child>p{margin-top:16px}
.tpl-slack .sl-facts{display:grid;gap:16px}
.tpl-slack .sl-facts>:is(div,details){padding:24px 28px;border:1px solid var(--site-color-line);border-radius:var(--site-radius-card);background:var(--site-color-paper)}
.tpl-slack .sl-facts h3{font-size:19px}
.tpl-slack .sl-facts>div>p{margin-top:8px}
.tpl-slack .sl-policy-draft>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:600;color:var(--site-color-ink)}
.tpl-slack .sl-policy-draft>summary span{padding:2px 10px;border-radius:999px;background:var(--site-palette-yellow-soft);font-size:12px;font-weight:400;color:#7a5c00}
.tpl-slack .sl-policy-draft h3{margin-top:22px;font-size:16px}
.tpl-slack .sl-policy-draft blockquote{margin-top:8px;padding:12px 16px;border-radius:12px;background:var(--site-color-band);font-size:14px;line-height:1.6}
.tpl-slack .sl-policy-draft>p{margin-top:8px;font-size:13px}
.tpl-slack .sl-draft-warning{color:#7a5c00}
.tpl-slack .sl-policy-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px;font-size:13px}
.tpl-slack .sl-policy-links :is(a,button){padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer}

/* FAQ: the homepage's split layout. */
.tpl-slack .sl-faq-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.tpl-slack .sl-faq-layout .sl-heading{display:block;margin:0}
.tpl-slack .sl-faq details{border-top:1px solid var(--site-color-line)}
.tpl-slack .sl-faq details:last-child{border-bottom:1px solid var(--site-color-line)}
.tpl-slack .sl-faq summary{padding:20px 0;font-size:15px}
.tpl-slack .sl-faq details>:not(summary){margin-bottom:12px}
.tpl-slack .sl-faq details>:last-child{margin-bottom:0;padding-bottom:20px}
.tpl-slack .sl-faq blockquote{padding:12px 16px;border-radius:12px;background:var(--site-color-band);font-size:14px;line-height:1.6;color:var(--site-color-ink)}
.tpl-slack .sl-faq .sl-draft-warning{font-size:13px}
.tpl-slack .sl-faq .sl-policy-links{margin-top:0}
.tpl-slack .sl-faq-pending{display:inline-flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;color:var(--site-color-muted)}

/* Closing call to action on the shared gradient. */
.tpl-slack .sl-final{border-top:0;color:#fff}
.tpl-slack .sl-final h2{max-width:640px;color:#fff}
.tpl-slack .sl-final .sl-final-cta>p{max-width:560px;margin-top:14px;font-size:17px;color:#fff}
.tpl-slack .sl-final .button{margin-top:28px}
.tpl-slack .sl-final-cta>svg{display:block;width:40px;height:auto;margin-bottom:24px;color:#fff}
.tpl-slack .sl-setup-grid .button{margin-top:4px}
.tpl-slack .sl-final .sl-final-cta>.sl-requirements{font-size:12px;color:#ffffffd9}
.tpl-slack .sl-final .sl-policy-links{color:#fff}

@media(max-width:800px){
  .tpl-slack :is(.sl-heading,.sl-steps,.sl-proactive-grid,.sl-story,.sl-story:nth-child(2),.sl-ondemand,.sl-brain-layout,.sl-setup-grid,.sl-facts-layout,.sl-faq-layout){grid-template-columns:1fr}
  .tpl-slack :is(.sl-story,.sl-ondemand,.sl-brain-layout){row-gap:28px}
  .tpl-slack :is(.sl-story:nth-child(2) .sl-story-visual,.sl-brain-layout>.sl-brain-stage){order:0}
  .tpl-slack .sl-ondemand>.sl-more-questions,.tpl-slack .sl-product-preview{grid-column:auto;grid-row:auto}
  .tpl-slack .sl-followthrough{gap:64px}
  .tpl-slack .sl-setup-steps{grid-template-columns:1fr}
  .tpl-slack :is(.sl-story-visual,.sl-product-preview,.sl-brain-stage){margin-inline:0}
  .tpl-slack .sl-ondemand{margin-top:64px}
  .tpl-slack .sl-heading>p{grid-column:1;margin-top:12px}
  .tpl-slack :is(.sl-steps li,.sl-usecase)+:is(li,.sl-usecase){border-left:0;border-top:1px solid var(--site-color-line)}
  .tpl-slack :is(.sl-brain-layout,.sl-facts-layout,.sl-faq-layout){gap:32px}
}
@media(max-width:680px){
  .tpl-slack .sl-hero{padding:130px 0 64px}
  .tpl-slack .sl-hero-demo{margin-top:40px;margin-bottom:-56px}
  .tpl-slack .sl-hero-demo .sl-window-body{min-height:0;padding-bottom:72px}
  .tpl-slack .sl-setup-grid>:is(div,aside){padding:24px}
  .tpl-slack :is(.sl-story:nth-child(odd) .sl-story-visual,.sl-story:nth-child(2) .sl-story-visual,.sl-product-preview,.sl-brain-layout>.sl-brain-stage){padding:16px}
}

/* Product illustrations: Slack and document mock-ups in Slack's own colours.
   Extracted once from the Slack page source; they keep their own UI typography. */
.slack-page .sl-document-fields {margin-top: 18px;border: 1px solid #e2e2e2;border-radius: 8px;background: white;padding: 0 16px;}
.slack-page .sl-document-fields > div {padding: 12px 0;border-bottom: 1px solid #eee;}
.slack-page .sl-document-fields > div:last-child {border-bottom: 0;}
.slack-page .sl-document-fields strong {font-size: 12px;}
.slack-page .sl-draft-label {display: inline-block;padding: 5px 8px;border-radius: 4px;font-size: 10px;margin-top: 15px;background: #f0e6dc;color: #745436;}
.slack-page .sl-brain-document {background: #fffefb;border: 1px solid #dfd3c9;border-radius: 12px;box-shadow: 0 12px 24px -10px #55391f30;overflow: hidden;}
.slack-page .sl-doc-bar {display: flex;align-items: center;gap: 8px;font-size: 10px;padding: 14px;border-bottom: 1px solid #eee7e0;}
.slack-page .sl-doc-bar > span:last-child {margin-left: auto;font-size: 9px;color: #78716c;}
.slack-page .sl-doc-body {padding: 26px;}
.slack-page .sl-doc-body .sl-kicker {font-size: 9px;}
.slack-page .sl-doc-body h3 {font: 600 27px/1.1 var(--site-font-heading);margin-bottom: 10px;}
.slack-page .sl-doc-body p {font-size: 12px;}
.slack-page .sl-doc-body > div {padding: 18px 0;border-bottom: 1px solid #e6e1da;font-size: 12px;}
.slack-page .sl-doc-body > div > span {margin-right: 12px;color: #918577;font-size: 10px;}
.slack-page .sl-doc-body > div > p {margin-top: 5px;}
.slack-page .sl-window {color: #1d1c1d;background: white;font-family: Arial, Helvetica, sans-serif;border-radius: 12px;border: 1px solid #1c19171f;box-shadow: 0 12px 40px -18px #15102d50;overflow: hidden;text-align: left;}
.slack-page .sl-window p {font-family: Arial, Helvetica, sans-serif;color: #1d1c1d;font-size: 14px;line-height: 1.5;}
.slack-page .sl-window-bar {height: 36px;background: #341136;color: #fff;display: flex;align-items: center;justify-content: space-between;padding: 0 16px;gap: 20px;font-size: 12px;}
.slack-page .sl-window-bar > span:nth-child(2) {border-radius: 5px;background: #ffffff24;padding: 4px 16px;width: 55%;text-align: left;font-size: 11px;}
.slack-page .sl-window-dots {color: #b99ebd;letter-spacing: 3px;font-size: 10px;}
.slack-page .sl-window-body {display: flex;min-height: 340px;}
.slack-page .sl-sidebar {width: 190px;flex-shrink: 0;background: #f3edf5;color: #4d3650;font-size: 12px;padding: 20px 12px;}
.slack-page .sl-sidebar > b {display: block;font-size: 16px;color: #1d1c1d;margin-bottom: 25px;padding: 0 6px;}
.slack-page .sl-sidebar > b span {float: right;}
.slack-page .sl-sidebar p {font-size: 12px;padding: 7px 6px;color: #4d3650;}
.slack-page .sl-sidebar small {display: block;font-size: 11px;padding: 20px 6px 10px;}
.slack-page .sl-channel-selected {padding: 8px;border-radius: 6px;background: #dfcde5;}
.slack-page .sl-online {color: #28775a;}
.slack-page .sl-conversation {flex: 1;min-width: 0;}
.slack-page .sl-channel-title {padding: 15px 24px;font-size: 16px;display: flex;justify-content: space-between;gap: 12px;border-bottom: 1px solid #e8e8e8;}
.slack-page .sl-channel-title > span {color: #616061;}
.slack-page .sl-messages {padding: 8px 24px 24px;}
.slack-page .sl-day {display: flex;align-items: center;gap: 16px;justify-content: center;padding: 8px 0 20px;font-size: 10px;font-weight: 600;}
.slack-page .sl-day:before,.slack-page .sl-day:after {content: "";height: 1px;background: #e6e6e6;flex: 1;}
.slack-page .sl-day > span {border: 1px solid #ddd;border-radius: 20px;padding: 5px 14px;}
.slack-page .sl-message {display: flex;gap: 10px;margin-bottom: 18px;}
.slack-page .sl-avatar {flex-shrink: 0;display: grid;place-items: center;width: 34px;height: 34px;border-radius: 8px;background: #ee684a;color: #fff;}
.slack-page .sl-human {background: #dce8f1;color: #325165;font-size: 12px;font-weight: 600;}
.slack-page .sl-message-content {min-width: 0;flex: 1;}
.slack-page .sl-byline {display: flex;flex-wrap: wrap;gap: 6px;align-items: center;margin-bottom: 6px;font-size: 14px;}
.slack-page .sl-byline time {font-size: 10px;color: #676467;}
.slack-page .sl-app-label {font-size: 8px;padding: 2px 3px;border-radius: 2px;background: #ededed;color: #676467;}
.slack-page .sl-message-content > p + p {margin-top: 7px;}
.slack-page .sl-update {padding-left: 14px;border-left: 3px solid #d9d5dc;margin: 14px 0 0;}
.slack-page .sl-update > p + p {margin-top: 12px;}
.slack-page .sl-update p {font-size: 13px;}
.slack-page .sl-status {display: inline-block;width: 7px;height: 7px;border-radius: 50%;margin-right: 4px;}
.slack-page .sl-status.green {background: #39845c;}
.slack-page .sl-status.amber {background: #c19131;}
.slack-page .sl-source-link {color: #1264a3;font-size: 12px;padding: 9px 0 3px;text-align: left;text-decoration: underline;text-underline-offset: 3px;}
.slack-page .sl-followup-button {margin-left: 44px;padding: 9px 12px;border: 1px solid #bdc9d2;border-radius: 6px;background: #f6fafe;color: #1264a3;font-size: 12px;text-align: left;line-height: 1.5;}
.slack-page .sl-followup-button span {margin-left: 16px;}
.slack-page .sl-thread {border-top: 1px solid #eee;padding-top: 20px;}
.slack-page .sl-reset {font-size: 11px;color: #676467;padding: 0;margin-left: 44px;text-decoration: underline;}
.slack-page .sl-mention {background: #e5f2fa;color: #1264a3;}
.slack-page .sl-compact .sl-window-body {min-height: 0;}
.slack-page .sl-compact .sl-channel-title {padding: 14px 20px;font-size: 13px;background: #fbf9fc;}
.slack-page .sl-compact .sl-messages {padding: 22px 20px 8px;}
.slack-page .sl-compact .sl-document-fields p {font-size: 12px;color: #616061;}
@media (max-width: 760px){
.slack-page .sl-sidebar {display: none;}
}
@media (max-width: 520px){
.slack-page .sl-channel-title {padding: 14px 16px;font-size: 14px;}
.slack-page .sl-messages {padding: 8px 14px 20px;}
.slack-page .sl-compact .sl-messages {padding: 18px 14px 4px;}
.slack-page .sl-avatar {width: 28px;height: 28px;border-radius: 6px;}
.slack-page .sl-avatar svg {width: 18px;}
.slack-page .sl-message {gap: 8px;}
.slack-page .sl-window p {font-size: 13px;}
.slack-page .sl-byline {font-size: 13px;}
.slack-page .sl-followup-button,.slack-page .sl-reset {margin-left: 36px;}
.slack-page .sl-doc-body {padding: 22px;}
}
/* Product mock-ups keep their light UI in dark mode, so their text stays dark. */
html.dark .slack-page :is(.sl-brain-stage,.sl-brain-document){--site-color-ink:#1c1917;--site-color-muted:#696660;color:#1c1917}
html.dark .slack-page .sl-brain-document :is(h3,strong,span,p){color:inherit}
html.dark .slack-page .sl-brain-document p{color:#696660}
html.dark .slack-page .sl-brain-stage .sl-demo-caption{color:#57534e}
/* Dark mode: light Slack windows get a quiet frame and a softer glow instead of glaring on near-black. */
html.dark .slack-page :is(.sl-window,.sl-brain-document){border-color:#3a3a3a;box-shadow:0 0 0 1px #00000060,0 16px 40px -20px #000000c0}
html.dark .slack-page .sl-brain-stage{filter:brightness(.92)}

/* Example prompts lead each column as permanent speech-bubble visuals. */
.tpl-slack .sl-usecase-visual{display:flex;align-items:center;flex:1;padding:var(--site-card-space);min-height:240px}
.tpl-slack .sl-usecase-visual blockquote{position:relative;width:100%;margin:0;padding:20px;border-radius:var(--site-radius-card);background:var(--ui-tone-soft);color:var(--site-color-ink);font-size:14px;line-height:1.6}
.tpl-slack .sl-usecase-visual blockquote::after{content:"";position:absolute;left:24px;bottom:-8px;width:18px;height:18px;background:inherit;transform:rotate(45deg);border-radius:3px}
.tpl-slack .sl-usecase-copy{padding:var(--site-card-space);padding-top:12px}
.tpl-slack .sl-usecase-copy>p{margin:0}
@media(min-width:801px){.tpl-slack .sl-proactive-grid{width:calc(100% + 2 * var(--site-card-outset));margin-left:calc(-1 * var(--site-card-outset))}.tpl-slack .sl-usecase-copy{min-height:226px}}
@media(max-width:800px){.tpl-slack .sl-usecase-visual{min-height:0;padding-bottom:28px}.tpl-slack .sl-usecase-copy{padding-top:12px}}

/* Desktop Slack hero: native-density chrome, navigation and message composer. */
.tpl-slack .sl-hero-demo .sl-desktop-window{font-family:Arial,Helvetica,sans-serif;background:var(--slack-paper);color:var(--slack-ink);border-radius:10px;border-color:var(--slack-line)}
.sl-desktop-window .sl-ui-icon{width:18px;height:18px;flex-shrink:0;display:block}
.slack-page .sl-desktop-window p{font-size:15px;line-height:1.46;color:var(--slack-ink)}
.slack-page .sl-desktop-window .sl-window-bar{height:40px;padding:0 14px;gap:16px;background:var(--slack-chrome);color:var(--slack-rail-ink)}
.sl-traffic-lights{display:flex;gap:7px;width:64px;flex-shrink:0}
.sl-traffic-lights i{width:10px;height:10px;border-radius:50%;background:var(--slack-red)}
.sl-traffic-lights i:nth-child(2){background:var(--slack-yellow)}
.sl-traffic-lights i:nth-child(3){background:var(--slack-traffic-green)}
.sl-history{display:flex;gap:16px;margin-left:132px;color:var(--slack-rail-muted)}
.sl-desktop-search{height:28px;display:flex;align-items:center;gap:9px;flex:1;max-width:600px;padding:0 10px;background:var(--slack-search);border:1px solid var(--slack-search);border-radius:6px;font-size:13px}
.sl-desktop-search kbd{margin-left:auto;font:11px Arial,sans-serif;color:var(--slack-rail-muted)}
.sl-desktop-window .sl-window-bar>.sl-ui-icon{margin-left:auto}
.tpl-slack .sl-hero-demo .sl-desktop-window .sl-window-body{min-height:600px;padding-bottom:0;background:var(--slack-paper)}
.sl-app-rail{width:68px;flex:0 0 68px;display:flex;flex-direction:column;align-items:center;gap:15px;padding:12px 0;background:var(--slack-chrome);color:var(--slack-rail-ink)}
.sl-workspace-mark{width:36px;height:36px;background:var(--site-palette-mint);color:var(--site-color-white);border-radius:9px;font:bold 22px/36px Arial;text-align:center;margin-bottom:4px}
.sl-rail-item{display:flex;align-items:center;flex-direction:column;gap:5px;font-size:10px}
.sl-rail-item .sl-ui-icon{width:36px;height:32px;padding:6px;border-radius:9px}
.sl-rail-item.is-active .sl-ui-icon{background:var(--slack-search)}
.sl-rail-bottom{margin-top:auto;display:flex;flex-direction:column;gap:18px;align-items:center}
.sl-rail-add{padding:7px;background:var(--slack-search);border-radius:50%}
.sl-profile-avatar{position:relative;width:34px;height:34px;display:grid;place-items:center;background:var(--site-palette-mint);font:bold 12px Arial;border-radius:8px}
.sl-profile-avatar i{position:absolute;bottom:-2px;right:-2px;width:10px;height:10px;background:var(--slack-traffic-green);border:2px solid var(--slack-chrome);border-radius:50%}
.slack-page .sl-desktop-window .sl-sidebar{width:222px;padding:0 12px 16px;background:var(--slack-sidebar);color:var(--slack-ink)}
.sl-workspace-heading{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 6px;gap:12px}
.sl-workspace-heading b{display:flex;align-items:center;gap:5px;font-size:18px}
.sl-workspace-heading b .sl-ui-icon{width:13px}
.slack-page .sl-desktop-window .sl-sidebar p{display:flex;align-items:center;gap:9px;padding:5px 9px;font-size:14px;color:var(--slack-ink);line-height:1.4}
.sl-sidebar-tools{padding:6px 0 12px;border-bottom:1px solid var(--slack-line)}
.sl-sidebar-tools .sl-ui-icon{width:17px;height:17px;color:var(--slack-muted)}
.slack-page .sl-desktop-window .sl-sidebar small{display:flex;align-items:center;gap:5px;font-size:13px;padding:18px 5px 7px;color:var(--slack-muted)}
.sl-sidebar small .sl-ui-icon{width:13px;height:13px}
.slack-page .sl-desktop-window .sl-channel-selected{display:flex;gap:9px;padding:5px 9px;border-radius:5px;background:var(--slack-selected);font-size:14px;font-weight:600}
.sl-sidebar p>span:first-child,.sl-channel-selected>span{min-width:17px;text-align:center}
.sl-mini-agent,.sl-mini-person{display:grid;place-items:center;width:19px;height:19px;border-radius:4px;font:bold 9px Arial;background:var(--site-palette-blue);color:var(--slack-rail-ink)}
.sl-mini-person{background:var(--site-palette-mint)}
.sl-sidebar-app{font-size:9px;color:var(--slack-muted)}
.slack-page .sl-desktop-window .sl-online{color:var(--slack-green);font-size:9px;margin-left:auto}
.slack-page .sl-desktop-window .sl-conversation{display:flex;flex-direction:column;background:var(--slack-paper)}
.slack-page .sl-desktop-window .sl-channel-title{min-height:52px;align-items:center;padding:10px 20px;border-bottom:0;font-size:18px;color:var(--slack-ink)}
.sl-channel-name,.sl-channel-actions{display:flex;align-items:center;gap:10px}
.sl-channel-name strong{font-size:18px}
.sl-channel-name strong span{font-weight:400;color:var(--slack-muted)}
.sl-channel-name>.sl-ui-icon{width:13px}
.sl-star{color:var(--slack-muted);font-size:21px}
.sl-channel-actions{gap:12px;color:var(--slack-muted);font-size:12px}
.sl-channel-actions .sl-ui-icon:first-child{margin-right:-9px}
.sl-desktop-window .sl-channel-tabs{display:flex;align-items:center;gap:24px;height:34px;padding:0 20px;border-bottom:1px solid var(--slack-line);color:var(--slack-muted);font-size:13px}
.sl-channel-tabs>span{height:100%;display:flex;align-items:center}
.sl-channel-tabs .is-active{color:var(--slack-ink);border-bottom:2px solid var(--slack-ink);font-weight:600}
.sl-channel-tabs .sl-ui-icon{width:14px;height:14px}
.slack-page .sl-desktop-window .sl-messages{padding:0 20px 20px;flex:1}
.slack-page .sl-desktop-window .sl-day{padding:15px 0 20px;gap:0;font-size:12px;color:var(--slack-ink)}
.slack-page .sl-desktop-window .sl-day::before,.slack-page .sl-desktop-window .sl-day::after{background:var(--slack-line)}
.slack-page .sl-desktop-window .sl-day>span{padding:5px 12px;border-color:var(--slack-line);background:var(--slack-paper)}
.slack-page .sl-desktop-window .sl-message{gap:10px;margin-bottom:14px}
.slack-page .sl-desktop-window .sl-avatar{width:36px;height:36px;border-radius:7px;background:var(--site-palette-blue);color:var(--slack-rail-ink)}
.slack-page .sl-desktop-window .sl-byline{gap:7px;margin-bottom:4px;font-size:15px}
.slack-page .sl-desktop-window .sl-byline time{font-size:12px;color:var(--slack-muted)}
.slack-page .sl-desktop-window .sl-app-label{font-size:10px;padding:1px 3px;background:var(--slack-line);color:var(--slack-muted)}
.slack-page .sl-desktop-window .sl-update{margin-top:12px;border-color:var(--slack-line);padding-left:12px}
.slack-page .sl-desktop-window .sl-update p{font-size:15px}
.slack-page .sl-desktop-window .sl-source-link{font-size:14px;color:var(--slack-link)}
.slack-page .sl-desktop-window .sl-followup-button{margin-left:46px;background:var(--slack-paper);border:1px solid var(--slack-line);color:var(--slack-ink);font-size:13px;font-weight:600;padding:7px 12px;border-radius:4px;box-shadow:var(--site-shadow-card)}
.sl-message-composer{margin:0 20px;border:1px solid var(--slack-muted);border-radius:8px;color:var(--slack-muted);overflow:hidden}
.sl-format-tools{display:flex;align-items:center;gap:18px;padding:10px 12px;background:color-mix(in srgb,var(--slack-line) 35%,var(--slack-paper));font-size:14px;height:34px}
.sl-composer-placeholder{padding:12px;font-size:14px;min-height:47px}
.sl-composer-tools{display:flex;align-items:center;justify-content:space-between;padding:6px 12px 10px;font-size:17px}
.sl-composer-tools>div{display:flex;gap:14px;align-items:center}
.sl-composer-tools .sl-ui-icon{width:18px;height:18px}
.sl-composer-tools>div>.sl-ui-icon:first-child{padding:3px;width:25px;height:25px;border-radius:50%;background:var(--slack-line)}
.sl-tool-separator{height:20px;border-left:1px solid var(--slack-line)}
.sl-composer-tools .sl-send-control{gap:9px;opacity:.7}
.sl-composer-hint{text-align:right;padding:5px 20px 10px;font-size:10px;color:var(--slack-muted)}
@media(max-width:900px){.sl-history{margin-left:0}.slack-page .sl-desktop-window .sl-sidebar{width:188px}.sl-channel-actions>.sl-ui-icon:first-child,.sl-channel-actions>span{display:none}}
@media(max-width:760px){.slack-page .sl-desktop-window .sl-sidebar{display:none}.sl-app-rail{width:54px;flex-basis:54px}.slack-page .sl-desktop-window .sl-channel-title{padding-inline:14px}.sl-channel-actions{gap:9px}}
@media(max-width:520px){.sl-app-rail,.sl-history,.sl-desktop-search kbd{display:none}.sl-traffic-lights{width:auto}.slack-page .sl-desktop-window .sl-channel-title{font-size:15px}.sl-channel-name strong{font-size:15px}.sl-channel-actions>.sl-ui-icon:not(:last-child){display:none}.slack-page .sl-desktop-window .sl-messages{padding-inline:14px}.sl-message-composer{margin-inline:14px}.sl-format-tools{gap:14px}.slack-page .sl-desktop-window p,.slack-page .sl-desktop-window .sl-update p{font-size:14px}.tpl-slack .sl-hero-demo .sl-desktop-window .sl-window-body{min-height:560px}}

#slack-desktop-preview{scroll-margin-top:145px}

.sl-modes-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--site-section-gap)}
.tpl-slack .sl-mode{min-width:0;display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:40px}
.tpl-slack .sl-mode-copy{text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.tpl-slack .sl-mode-copy h2{max-width:440px;text-wrap:balance}
.tpl-slack .sl-mode-copy p{max-width:440px;text-wrap:pretty}
.tpl-slack .sl-mode-link{font-size:15px;text-underline-offset:4px}
.tpl-slack .sl-mention{display:inline;padding:.08em .25em;border-radius:4px;background:var(--slack-mention-bg);color:var(--slack-mention-ink);white-space:nowrap}
.tpl-slack .sl-mode-visual{display:flex;flex-direction:column;justify-content:center;gap:20px;min-height:460px;padding:28px;border-radius:var(--site-radius-card);overflow:hidden}
.tpl-slack .sl-mode-visual-ask{background:color-mix(in srgb,var(--site-palette-lavender) 18%,var(--site-color-paper))}
.tpl-slack .sl-mode-visual-auto{background:color-mix(in srgb,var(--site-palette-mint) 18%,var(--site-color-paper))}
.tpl-slack .sl-mode-window,.tpl-slack .sl-mode-prompt{border:1px solid var(--site-color-line);border-radius:12px;background:var(--site-color-surface);color:var(--site-color-ink);overflow:hidden;box-shadow:var(--site-shadow-card)}
.tpl-slack .sl-mode-channel{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--site-color-line);font:600 14px/1.4 Arial,Helvetica,sans-serif}
.tpl-slack .sl-mode-channel>span{color:var(--site-color-muted)}
.tpl-slack .sl-mode-thread{padding:20px 18px}
.tpl-slack .sl-mode-message{display:flex;align-items:flex-start;gap:10px;margin-bottom:20px}
.tpl-slack .sl-mode-message:last-child{margin-bottom:0}
.tpl-slack .sl-mode-message>div:last-child{min-width:0;flex:1}
.tpl-slack .sl-mode-avatar{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:7px;font:600 15px/1 Arial,Helvetica,sans-serif}
.tpl-slack .sl-mode-human{background:var(--site-palette-lavender);color:var(--site-metal-text)}
.tpl-slack .sl-mode-bot{background:var(--site-palette-blue);color:var(--site-metal-text)}
.tpl-slack .sl-mode-bot svg{width:20px;height:15px}
.tpl-slack .sl-mode-byline{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px;font:13px/1.3 Arial,Helvetica,sans-serif}
.tpl-slack .sl-mode-byline>span{font-size:10px;color:var(--site-color-muted)}
.tpl-slack .sl-mode-app{padding:2px 3px;border-radius:3px;background:var(--site-color-band)}
.tpl-slack .sl-mode-visual p{font:13px/1.5 Arial,Helvetica,sans-serif;color:var(--site-color-ink)}
.tpl-slack .sl-mode-result{display:grid;gap:6px;margin-top:14px;padding-left:12px;border-left:3px solid var(--site-color-line);font:13px/1.5 Arial,Helvetica,sans-serif}
.tpl-slack .sl-mode-source{display:block;margin-top:10px;font:11px/1.5 Arial,Helvetica,sans-serif;color:var(--site-color-muted)}
.tpl-slack .sl-mode-reply{display:grid;gap:22px;padding:12px;border:1px solid var(--site-color-line);border-radius:8px;font:12px/1.4 Arial,Helvetica,sans-serif;color:var(--site-color-muted)}
.tpl-slack .sl-mode-prompt p{padding:16px}
.tpl-slack .sl-mode-prompt>div{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--site-color-line);color:var(--site-color-muted);font:13px/1.3 Arial,Helvetica,sans-serif}
.tpl-slack .sl-mode-prompt>div>span{display:grid;place-items:center;width:28px;height:24px;border-radius:5px;background:var(--site-palette-mint);color:var(--site-metal-text)}
.tpl-slack .sl-mode-schedule{font-size:10px;font-weight:400;text-align:right}
@media(max-width:767px){
 .tpl-slack .sl-modes-grid{grid-template-columns:minmax(0,1fr);gap:56px}
 .tpl-slack .sl-mode{gap:28px}
 .tpl-slack .sl-mode-visual{min-height:0;padding:16px}
 .tpl-slack .sl-mode-copy{text-align:left;align-items:flex-start}
 .tpl-slack .sl-mode-channel,.tpl-slack .sl-mode-thread{padding:14px}
}

html.dark .tpl-slack :is(.sl-modes,.sl-hero) .sl-mention{background:var(--slack-mention-bg);color:var(--slack-mention-ink)}

.tpl-slack .sl-hero-dark .sl-hero-demo .sl-window{border:0}

/* Slack switches from the hero palette at the first scroll movement. */
html:not(.dark) .tpl-slack .toyo-site-header.is-scrolled .toyo-site-nav img{filter:brightness(0)}
.tpl-slack .toyo-site-nav img{transition:none}
.tpl-slack .toyo-site-links>a{transition:color var(--site-motion-normal) ease,background var(--site-motion-normal) ease,box-shadow var(--site-motion-normal) ease}
@media(prefers-reduced-motion:reduce){.tpl-slack .toyo-site-nav img,.tpl-slack .toyo-site-links>a,.tpl-slack .toyo-site-header::before{transition:none}}

/* Match the shared FAQ card treatment. */
.site-v2.tpl-slack #faq{background:var(--site-color-paper)}
.site-v2.tpl-slack .sl-faq{background:var(--site-color-surface);border:1px solid var(--site-color-line);border-radius:var(--site-radius-card);padding:12px 0;overflow:hidden}
.site-v2.tpl-slack .sl-faq details{border:0;padding:0 24px;position:relative}
.site-v2.tpl-slack .sl-faq details:last-child{border-bottom:0}
.site-v2.tpl-slack .sl-faq details+details::before{content:"";position:absolute;top:0;left:0;right:0;border-top:1px solid var(--site-color-line);opacity:.55}
.site-v2.tpl-slack .sl-faq summary{padding:20px 0}
@media(max-width:680px){.site-v2.tpl-slack .sl-faq details{padding-inline:20px}}

.site-v2.tpl-slack .sl-final-cta>svg,.site-v2.tpl-slack .sl-final-cta>.sl-policy-links{display:none}

.site-v2.tpl-slack #ways-to-work{background:var(--site-color-band)}

/* Phone previews retain the message and channel identity without desktop chrome. */
@media(max-width:680px){
 .tpl-slack .sl-hero-demo{margin-bottom:0;padding-bottom:24px}
 .tpl-slack .sl-hero-demo .sl-desktop-window .sl-window-body{min-height:0;padding-bottom:0}
 .tpl-slack .sl-hero-demo :is(.sl-window-bar,.sl-app-rail,.sl-sidebar,.sl-channel-tabs,.sl-day,.sl-message-composer,.sl-composer-hint){display:none}
 .tpl-slack .sl-hero-demo .sl-desktop-window .sl-channel-title{min-height:0;padding:16px;border-bottom:1px solid var(--slack-line)}
 .tpl-slack .sl-hero-demo .sl-desktop-window .sl-messages{padding:16px}
 .tpl-slack .sl-hero-demo .sl-channel-name>:not(strong),.tpl-slack .sl-hero-demo .sl-channel-actions{display:none}
 .tpl-slack .sl-hero-demo .sl-channel-title::after{content:"";width:20px;height:20px;flex-shrink:0;background:url("assets/logos/slack-color.svg") center/contain no-repeat}
 .tpl-slack .sl-hero-demo .sl-followup-button{margin-left:0;margin-bottom:4px}
 .tpl-slack .sl-mode-result,.tpl-slack .sl-update{padding-left:0;border-left:0}
 .tpl-slack .sl-mode-reply{display:none}
 .tpl-slack .sl-mode-channel{gap:10px}
 .tpl-slack .sl-mode-channel>strong{min-width:0}
 .tpl-slack .sl-mode-schedule{max-width:100px}
}
.slack-page .sl-compact .sl-channel-title>span[aria-hidden],.tpl-slack .sl-mode-channel>span[aria-hidden]{font-size:0;flex-shrink:0;width:18px;height:18px;background:url("assets/logos/slack-color.svg") center/contain no-repeat}

/* One continuous process band, immediately after the hero. */
.site-v2.tpl-slack #how-it-works{background:var(--site-color-band)}
.tpl-slack .sl-how-modes{padding-top:64px}
@media(max-width:767px){.tpl-slack .sl-how-modes{padding-top:40px}}

/* Hero matches Slack’s current marketing illustration with its sidebar collapsed. */
.tpl-slack .sl-hero-demo .sl-desktop-window{border-radius:var(--slack-mac-window-radius);background:linear-gradient(180deg,var(--slack-marketing-top),var(--slack-marketing-bottom))}
.tpl-slack .sl-hero-demo .sl-desktop-window .sl-window-bar{height:40px;background:transparent;padding-inline:16px}
.tpl-slack .sl-hero-demo .sl-window-body{background:transparent!important;padding-right:6px;padding-bottom:6px!important}
.tpl-slack .sl-hero-demo .sl-app-rail{background:transparent;width:64px;flex-basis:64px}
.tpl-slack .sl-hero-demo .sl-sidebar,.tpl-slack .sl-hero-demo .sl-history{display:none}
.tpl-slack .sl-hero-demo .sl-conversation{border-radius:8px;overflow:hidden}
.tpl-slack .sl-hero-demo .sl-desktop-search{max-width:560px;height:26px;margin-inline:auto;background:var(--slack-marketing-search);border:0;border-radius:5px}
.tpl-slack .sl-hero-demo .sl-traffic-lights{gap:var(--slack-mac-control-gap)}
.tpl-slack .sl-hero-demo .sl-traffic-lights i{width:var(--slack-mac-control-size);height:var(--slack-mac-control-size);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.tpl-slack .sl-hero-demo .sl-channel-title{border-bottom:1px solid var(--slack-line)!important}
.tpl-slack .sl-hero-demo .sl-channel-tabs{display:none}
@media(max-width:680px){.tpl-slack .sl-hero-demo .sl-window-body{padding:0!important}.tpl-slack .sl-hero-demo .sl-conversation{border-radius:0}}

/* Same BouncyExamples component and disclosure treatment as the homepage. */
.tpl-slack #use-cases,.tpl-slack #faq{background:var(--site-color-paper)}
.tpl-slack #get-started{background:var(--site-color-band)}
.tpl-slack .sl-example-accordion{display:grid;grid-template-columns:34% 66%;border:1px solid var(--site-color-line);border-radius:var(--site-radius-card);overflow:hidden;background:var(--site-color-paper)}
.tpl-slack .sl-example-tabs{background:var(--site-color-surface);border-right:1px solid var(--site-color-line)}
.tpl-slack .bouncy-example-row+.bouncy-example-row{border-top:1px solid var(--site-color-line)}
.tpl-slack .bouncy-example-surface{overflow:hidden}
.tpl-slack .bouncy-example-surface button{display:flex;align-items:center;gap:12px;width:100%;padding:18px 22px;border:0;border-radius:0;background:transparent;color:var(--site-color-ink);font:600 14px/1.4 var(--site-font-body);text-align:left;cursor:pointer}
.tpl-slack .bouncy-example-surface button[aria-expanded=true]{padding-bottom:4px}
.tpl-slack .bouncy-example-surface button>span:nth-child(2){flex:1}
.tpl-slack .bouncy-example-surface button:focus-visible{outline:2px solid var(--site-palette-blue);outline-offset:-3px}
.tpl-slack .bouncy-example-icon{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;border-radius:9px;corner-shape:superellipse(1.5);color:white;background-image:linear-gradient(180deg,#ffffff16,#0000000a)}
.tpl-slack .bouncy-example-surface p{font:14px/1.55 var(--site-font-body);padding:0 22px 22px 62px;margin:0}
.tpl-slack .sl-example-stage{height:560px;background:var(--site-palette-lavender-soft);position:relative}
.tpl-slack .sl-example-preview{position:absolute;inset:0;padding:32px;display:flex;align-items:center;justify-content:center}
.tpl-slack .sl-example-preview[hidden]{display:none}
.tpl-slack .sl-example-preview .sl-mode-window{width:100%;max-height:100%;overflow:auto}
.tpl-slack .sl-example-preview .sl-mode-message{margin-bottom:24px}
.tpl-slack .sl-example-preview .sl-mode-message p{font:14px/1.5 Arial,Helvetica,sans-serif}
.tpl-slack .sl-example-preview:not([hidden]){animation:sl-preview-in .25s ease both}
@keyframes sl-preview-in{from{opacity:0}to{opacity:1}}
@media(max-width:767px){.tpl-slack .sl-example-accordion{grid-template-columns:1fr}.tpl-slack .sl-example-tabs{border-right:0;border-bottom:1px solid var(--site-color-line)}.tpl-slack .sl-example-stage{height:570px}.tpl-slack .sl-example-preview{padding:16px}}
@media(prefers-reduced-motion:reduce){.tpl-slack .sl-example-preview:not([hidden]){animation:none}}

/* Backgrounds Supply plasma exploration: background only, never captures input. */
.tpl-slack .sl-hero-gradient{position:absolute;inset:0 0 auto;width:100%;height:calc(100% + 80px);border:0;display:block;pointer-events:none;z-index:0}
.tpl-slack .sl-hero-dark>.hero-copy,.tpl-slack .sl-hero-dark>.sl-hero-demo{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.tpl-slack .sl-hero-gradient{display:none}}

/* Match the homepage hero CTA sizing, typography and hover states. */
.tpl-slack :is(.sl-hero,.sl-final) .button{font:700 15px/1.4 var(--site-font-body);letter-spacing:normal;border-radius:14px;padding:14px 24px}
.tpl-slack :is(.sl-hero,.sl-final) .button:not(.secondary):not(.ui-button-outline){background:var(--site-glass-white-fill);border:1px solid var(--site-glass-white-border);box-shadow:var(--site-glass-white-shadow);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);color:var(--site-glass-button-ink);text-shadow:none}
.tpl-slack :is(.sl-hero,.sl-final) .button:not(.secondary):not(.ui-button-outline):hover{background:var(--site-glass-white-hover-fill);color:var(--site-glass-button-ink)}
.tpl-slack .sl-hero .button.ui-button-outline{background:transparent;border:2px solid white;color:white;box-shadow:none}
.tpl-slack .sl-hero .button.ui-button-outline:hover{background:white;color:var(--site-glass-button-ink);text-shadow:none}

.tpl-slack .sl-setup-access{margin-top:72px;scroll-margin-top:var(--site-nav-height)}
@media(max-width:767px){.tpl-slack .sl-setup-access{margin-top:32px}}

.tpl-slack .sl-plasma-final{position:relative;overflow:hidden;background:var(--site-color-dark)}
.tpl-slack .sl-plasma-final>.container{position:relative;z-index:1}

/* Preview tones follow the shared accordion icon palette. */
.tpl-slack .sl-example-stage:has(#sl-example-0:not([hidden])){background:var(--site-palette-mint-soft)}
.tpl-slack .sl-example-stage:has(#sl-example-1:not([hidden])){background:var(--site-palette-blue-soft)}
.tpl-slack .sl-example-stage:has(#sl-example-2:not([hidden])){background:var(--site-palette-orange-soft)}
.tpl-slack .sl-example-stage:has(#sl-example-3:not([hidden])){background:var(--site-palette-lavender-soft)}
.tpl-slack .sl-example-stage{transition:background-color .4s cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){.tpl-slack .sl-example-stage{transition:none}}

/* Original coloured request cards accompany the response examples. */
.tpl-slack .sl-usecases .sl-proactive-grid{margin-bottom:48px}

.tpl-slack .sl-setup-intro{margin:0 0 32px}

/* Immediate first paint while the remote WebGL document starts. */
.tpl-slack :is(.sl-hero-dark,.sl-plasma-final){background-image:var(--slack-shader-poster);background-size:cover;background-position:center}

.tpl-slack .sl-hero-gradient{opacity:0;transition:opacity .35s ease}
.tpl-slack .sl-hero-gradient.is-ready{opacity:1}

/* Workflow ideas and conversation previews share the same outer edges. */
.tpl-slack .sl-conversation-heading{margin-top:64px}
@media(min-width:801px){.tpl-slack .sl-usecases .sl-example-accordion{width:calc(100% + 2 * var(--site-card-outset));margin-left:calc(-1 * var(--site-card-outset))}}
@media(max-width:800px){.tpl-slack .sl-conversation-heading{margin-top:48px}}

/* Compact onboarding and explicit access guidance use the shared heading rhythm. */
.tpl-slack .service-steps .service-step-heading{min-height:0;margin-bottom:14px}
.tpl-slack .sl-controls-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--site-color-line);border-radius:var(--site-radius-card);background:var(--site-color-surface);overflow:hidden}
.tpl-slack .sl-controls-grid article{padding:28px 24px}
.tpl-slack .sl-controls-grid article+article{border-left:1px solid var(--site-color-line)}
.tpl-slack .sl-controls-grid h3{font-size:21px;line-height:1.3;margin:0 0 14px}
.tpl-slack .sl-controls-grid p{margin:0}
.tpl-slack .sl-controls-grid .ui-icon{width:40px;height:40px;margin-bottom:18px;background:var(--site-color-band);color:var(--site-color-muted);border:1px solid var(--site-color-line)}
@media(max-width:800px){.tpl-slack .sl-controls-grid{grid-template-columns:1fr}.tpl-slack .sl-controls-grid article+article{border-left:0;border-top:1px solid var(--site-color-line)}}

/* The two Slack modes share one divided card. */
.tpl-slack .sl-how-modes{padding-top:16px}
.tpl-slack .sl-how-modes .sl-modes-grid{gap:0;padding:0;border:1px solid var(--site-color-line);border-radius:var(--site-radius-card);background:var(--site-color-surface);overflow:hidden}
.tpl-slack .sl-how-modes .sl-mode{padding:32px;gap:28px}
.tpl-slack .sl-how-modes .sl-mode+.sl-mode{border-left:1px solid var(--site-color-line)}
@media(max-width:767px){.tpl-slack .sl-how-modes .sl-mode{padding:24px}.tpl-slack .sl-how-modes .sl-mode+.sl-mode{border-left:0;border-top:1px solid var(--site-color-line)}.tpl-slack .sl-how-modes .sl-modes-grid{width:calc(100% - 48px)}}

.tpl-slack .sl-usecase .sl-context-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--site-color-line);border-radius:999px;background:var(--site-color-band);color:var(--site-color-muted);font:12px/1.4 var(--site-font-body);letter-spacing:normal;text-transform:none;margin-bottom:14px}
.tpl-slack .sl-context-pill svg{flex-shrink:0}

.tpl-slack .sl-person-avatar{overflow:hidden}
.tpl-slack .sl-person-avatar img{width:100%;height:100%;object-fit:cover}
.tpl-slack .sl-desktop-window .sl-lead-sources{color:var(--slack-muted);font-size:12px;margin-top:12px}

@media(min-width:801px){.tpl-slack .sl-how-modes .sl-modes-grid{width:calc(100% - 2 * var(--site-gutter) + 2 * var(--site-card-outset));max-width:calc(var(--site-inner-width) + 2 * var(--site-card-outset))}}

html.dark .tpl-slack .sl-how-modes .sl-modes-grid{background:color-mix(in srgb,var(--site-color-surface) 94%,var(--site-color-ink) 6%)}

.tpl-slack .sl-usecase-copy .sl-workflow-icon{display:grid;margin-top:18px;margin-bottom:16px}

.tpl-slack .sl-usecase-label{padding:var(--site-card-space);padding-bottom:0}
.tpl-slack .sl-usecase-label .sl-context-pill{margin-bottom:0}
.tpl-slack .sl-usecase-copy .sl-workflow-icon{margin-top:0}

@media(min-width:801px){.tpl-slack .sl-proactive-grid{grid-template-rows:auto auto auto}.tpl-slack .sl-usecase{display:grid;grid-template-rows:subgrid;grid-row:span 3}.tpl-slack .sl-usecase-visual{align-items:center;min-height:240px}.tpl-slack .sl-usecase-copy{min-height:0}}

.tpl-slack .sl-example-preview .sl-mode-bot{background:var(--ui-tone,var(--site-palette-blue));color:var(--site-color-white)}
.tpl-slack .sl-example-preview .sl-mode-bot svg{width:22px;height:17px}

.tpl-slack .sl-usecase-top{background:var(--ui-tone-soft);display:flex;flex-direction:column}
.tpl-slack .sl-workflow-message{display:flex;gap:10px;width:100%;padding:18px;background:var(--site-color-surface);border:1px solid var(--site-color-line);border-radius:12px;color:var(--site-color-ink)}
.tpl-slack .sl-workflow-message>img{flex:none;align-self:flex-start;width:30px;height:30px;border-radius:6px;object-fit:cover}
.tpl-slack .sl-workflow-message p{margin:6px 0 0;font-size:14px;line-height:1.6}
.tpl-slack .sl-workflow-message .sl-mode-byline>span{font-size:11px;color:var(--site-color-muted)}
.tpl-slack .sl-usecase-copy{padding-top:var(--site-card-space)}
@media(min-width:801px){.tpl-slack .sl-proactive-grid{grid-template-rows:auto auto}.tpl-slack .sl-usecase{grid-row:span 2}.tpl-slack .sl-usecase-top{min-height:0}.tpl-slack .sl-usecase-visual{min-height:0}}

.tpl-slack .sl-usecase-top .sl-usecase-visual{padding-block:20px}

/* Slack message lists share the preview text rhythm. */
.tpl-slack .sl-mode-account-list{list-style:disc;margin:10px 0 0;padding-left:20px;font:14px/1.5 Arial,Helvetica,sans-serif;color:var(--site-color-muted)}
.tpl-slack .sl-mode-account-list li+li{margin-top:10px}
.tpl-slack .sl-mode-account-list strong{color:var(--site-color-ink)}