/* Slack integration guide (/integration/slack).
   The set-up article from the old Webflow site, on the current site's look: cream ground, Fraunces headings,
   Poppins text, white cards, coral accents, the shared header and footer. */
#integration-slack,#integration-slack *,#integration-slack *::before,#integration-slack *::after{box-sizing:border-box}
#integration-slack{background:#FAF6F0;color:#111110;font-family:"Poppins",system-ui,sans-serif}
#integration-slack .is-wrap{width:min(1180px,100% - 48px);margin:0 auto}

/* ---- hero ---- */
#integration-slack .is-hero{padding:clamp(56px,7vw,104px) 0 clamp(32px,4vw,56px)}
#integration-slack .is-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;padding:7px 14px 7px 12px;border-radius:999px;background:#FFFFFF;border:1px solid #EDE6DA;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#A83C3C}
#integration-slack .is-eyebrow img{display:block;width:18px;height:18px}
#integration-slack h1{margin:0;font-family:"Fraunces",Georgia,serif;font-weight:700;font-variation-settings:"wght" 700,"opsz" 36;font-synthesis:none;font-size:clamp(44px,6vw,80px);line-height:1.04;letter-spacing:-.035em;color:#2A2A2E}
#integration-slack h1 span{color:#FF6B6B}
#integration-slack .is-intro{margin:22px 0 0;max-width:62ch;font-size:clamp(16px,1.5vw,19px);line-height:1.65;color:#57575B;text-wrap:pretty}
#integration-slack .is-covers{margin:32px 0 0;display:inline-block;min-width:min(360px,100%);padding:18px 24px;border-radius:16px;background:#FFFFFF;border:1px solid #EDE6DA}
#integration-slack .is-covers p{margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#6A655F}
#integration-slack .is-covers ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 28px}
#integration-slack .is-covers a{font-size:15px;font-weight:500;color:#2A2A2E;text-decoration:none;border-bottom:1px solid rgba(168,60,60,.4)}
#integration-slack .is-covers a:hover{color:#A83C3C;border-bottom-color:#A83C3C}

/* ---- article layout ---- */
#integration-slack .is-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(32px,5vw,72px);padding-bottom:clamp(56px,7vw,96px);align-items:start}
#integration-slack .is-side{position:sticky;top:120px}
#integration-slack .is-side p{margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#6A655F}
#integration-slack .is-side ul{list-style:none;margin:0;padding:0;border-left:2px solid #E8E2D8}
#integration-slack .is-side a{display:block;margin-left:-2px;padding:8px 0 8px 16px;border-left:2px solid transparent;font-size:14px;font-weight:500;line-height:1.35;color:#57575B;text-decoration:none;transition:color .2s,border-color .2s}
#integration-slack .is-side a:hover{color:#111110}
#integration-slack .is-side a.is-on{color:#A83C3C;border-left-color:#FF6B6B}
#integration-slack .is-main{min-width:0;max-width:820px}
#integration-slack .is-sec{scroll-margin-top:120px;padding-top:clamp(32px,4vw,48px)}
#integration-slack .is-sec:first-child{padding-top:0}
#integration-slack .is-sec + .is-sec{margin-top:clamp(32px,4vw,56px);border-top:1px solid #E8E2D8}
#integration-slack h2{margin:0 0 20px;font-family:"Fraunces",Georgia,serif;font-weight:700;font-variation-settings:"wght" 700,"opsz" 36;font-synthesis:none;font-size:clamp(30px,3.6vw,44px);line-height:1.1;letter-spacing:-.03em;color:#2A2A2E}
#integration-slack .is-main p{margin:0 0 16px;font-size:16px;line-height:1.7;color:#3B3B41;text-wrap:pretty}
#integration-slack .is-main a{color:#A83C3C;text-underline-offset:3px}
#integration-slack .is-lead{font-size:18px !important;color:#2A2A2E !important}

/* ---- capabilities ---- */
#integration-slack .is-cards{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#integration-slack .is-card{display:flex;gap:16px;padding:20px 22px;border-radius:16px;background:#FFFFFF;border:1px solid #EDE6DA}
#integration-slack .is-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#FFF0F0;color:#A83C3C}
#integration-slack .is-ico svg{width:22px;height:22px}
#integration-slack .is-card h3{margin:2px 0 4px;font-size:17px;font-weight:600;line-height:1.35;color:#111110}
#integration-slack .is-card p{margin:0 !important;font-size:14.5px !important;line-height:1.55 !important;color:#57575B !important}
#integration-slack .is-disc{padding:16px 20px;border-radius:12px;background:#F4EEE4;font-size:14px !important;line-height:1.6 !important;color:#57575B !important}
#integration-slack .is-disc strong{color:#2A2A2E}

/* ---- set-up steps ---- */
#integration-slack .is-note{display:flex;gap:12px;align-items:flex-start;margin:0 0 32px !important;padding:16px 20px;border-radius:12px;background:#FFF0F0;border:1px solid #FFD1D1;font-size:15px !important;line-height:1.55 !important;color:#2A2A2E !important}
#integration-slack .is-note svg{flex:none;width:20px;height:20px;margin-top:2px;color:#A83C3C}
#integration-slack .is-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:40px}
#integration-slack .is-step{display:grid;grid-template-columns:36px minmax(0,1fr);gap:18px;align-items:start}
#integration-slack .is-num{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#A83C3C;color:#FFFFFF;font-size:15px;font-weight:600}
#integration-slack .is-step h3{margin:4px 0 8px;font-size:19px;font-weight:600;line-height:1.35;color:#111110}
#integration-slack .is-step p{margin-bottom:12px}
#integration-slack .is-shot{margin:20px 0 0;overflow:hidden;border-radius:16px;background:#FFFFFF;border:1px solid #E8E2D8;box-shadow:0 10px 28px -20px rgba(17,17,16,.35)}
#integration-slack .is-shot img{display:block;width:100%;height:auto}

/* ---- FAQs ---- */
#integration-slack .is-faqs{display:flex;flex-direction:column;gap:12px}
#integration-slack .is-faq{border-radius:16px;background:#FFFFFF;border:1px solid #EDE6DA}
#integration-slack .is-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;cursor:pointer;list-style:none;font-size:16px;font-weight:600;line-height:1.4;color:#111110}
#integration-slack .is-faq summary::-webkit-details-marker{display:none}
#integration-slack .is-faq summary svg{flex:none;width:20px;height:20px;color:#A83C3C;transition:transform .24s cubic-bezier(.2,.7,.2,1)}
#integration-slack .is-faq[open] summary svg{transform:rotate(180deg)}
#integration-slack .is-faq summary:focus-visible{outline:2px solid #E85A5A;outline-offset:2px;border-radius:16px}
#integration-slack .is-faq p{margin:0 !important;padding:0 22px 20px}

/* ---- Need a hand? ---- */
#integration-slack .is-help{padding:0 0 clamp(64px,8vw,112px)}
#integration-slack .is-help__in{width:min(1180px,100% - 48px);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;padding:clamp(28px,4vw,44px) clamp(24px,4vw,48px);border-radius:24px;background:#FFFFFF;border:1px solid #EDE6DA}
#integration-slack .is-help__l{margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#A83C3C}
#integration-slack .is-help h2{margin:0 0 8px;font-size:clamp(26px,3vw,36px)}
#integration-slack .is-help p:last-child{margin:0;max-width:46ch;font-size:16px;line-height:1.6;color:#57575B}
#integration-slack .is-btn{display:inline-flex;align-items:center;gap:12px;padding:16px 28px;border-radius:999px;background:#2A2A2E;color:#FDFCFA;font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:18px;line-height:1.2;text-decoration:none;transition:background .2s}
#integration-slack .is-btn svg{width:18px;height:18px}
#integration-slack .is-btn:hover{background:#FF6B6B;color:#FFFFFF}
#integration-slack .is-btn:focus-visible{outline:2px solid #E85A5A;outline-offset:3px}

@media (max-width:900px){
  #integration-slack .is-layout{grid-template-columns:minmax(0,1fr)}
  #integration-slack .is-side{display:none}
  #integration-slack .is-sec{scroll-margin-top:96px}
}
@media (max-width:640px){
  #integration-slack .is-wrap,#integration-slack .is-help__in{width:calc(100% - 40px)}
  #integration-slack .is-cards{grid-template-columns:1fr}
  #integration-slack .is-step{grid-template-columns:30px minmax(0,1fr);gap:14px}
  #integration-slack .is-num{width:30px;height:30px;font-size:14px}
  #integration-slack .is-btn{width:100%;justify-content:center}
  #integration-slack .is-covers{display:block}
}