/* Chapters 02 and 04 echo the vivid frame of the Conversations showcase. */
.story-layout{align-items:stretch}.story-tabs{gap:12px}.story-tab{border:1px solid #d9d8d8;border-left:4px solid #d8d6d5;border-radius:13px;background:#fff;box-shadow:0 12px 25px rgba(32,49,68,.06)}.story-tab:hover,.story-tab.is-active{border-color:#f17556;border-left-color:#e9264d;background:linear-gradient(110deg,#fff,#fff3ed);box-shadow:0 14px 28px rgba(223,65,60,.12)}.story-tab-no{min-width:31px;color:#ce4047}
.story-display{border:13px solid transparent;border-radius:24px;background:linear-gradient(145deg,#22384f,#102339) padding-box,linear-gradient(125deg,#fd054d 0%,#ee3c42 48%,#ff8a1d 100%) border-box;box-shadow:0 30px 65px rgba(106,38,48,.22);padding:23px 26px}
.story-chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}.story-chapters article{position:relative;padding:24px 26px 25px;border:1px solid #d8d8d8;border-radius:14px;background:#fff;box-shadow:0 14px 28px rgba(28,47,68,.06);overflow:hidden}.story-chapters article::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(#fd054d,#ff8a1d)}.story-chapters article>span{display:block;color:#c84045;font-size:10px;font-weight:800;letter-spacing:.14em}.story-chapters strong{display:block;margin:14px 0 7px;color:#14273b;font:700 19px/1.2 Manrope,Inter,sans-serif}.story-chapters p{color:#53657a!important;font-size:12px;line-height:1.65;margin:0}
.integration-section .section-top{margin-bottom:58px}.integration-layout h2{margin:0 0 25px}.integration-visual{min-height:430px;border:13px solid transparent;border-radius:24px;background:linear-gradient(145deg,#1d3045,#0c1d31) padding-box,linear-gradient(125deg,#fd054d 0%,#ec4540 50%,#ff8a1d 100%) border-box;box-shadow:0 30px 65px rgba(111,39,51,.22);overflow:hidden}.integration-visual::before{display:none}
.connection-chrome{height:45px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 17px;border-bottom:1px solid #405267;color:#a3b7ca;font-size:9px;font-weight:800;letter-spacing:.12em}.connection-chrome>span:last-child{color:#eca673}.connection-content{padding:20px}.connection-heading{margin-bottom:16px}.connection-heading strong,.connection-heading small{display:block}.connection-heading strong{color:#fff;font:700 23px Manrope,Inter,sans-serif}.connection-heading small{color:#aabdd0;font-size:11px}
.connection-source{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid #405368;border-radius:11px;background:#1d3147}.source-icon{display:grid;place-items:center;flex:none;width:37px;height:37px;border-radius:10px;color:#fff;font:800 20px Manrope,Inter,sans-serif}.source-icon.rc{background:linear-gradient(135deg,#fa663a,#e4482e)}.source-icon.monday{background:linear-gradient(135deg,#6557e7,#4975e6)}.connection-source strong,.connection-source small{display:block}.connection-source strong{color:#fff;font-size:13px}.connection-source small{color:#a8bdd0;font-size:10px}.source-state{margin-left:auto;border:1px solid #547766;border-radius:20px;padding:4px 8px;color:#83e2b1;background:#1b3a37;font-size:9px;white-space:nowrap}
.connection-link{display:flex;align-items:center;justify-content:center;gap:9px;padding:9px 0;color:#eea36f;font-size:9px;font-weight:800;letter-spacing:.09em}.connection-link span{width:23px;height:1px;background:#d45c55}.connection-result{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px;border:1px solid #d76c55;border-radius:11px;background:linear-gradient(105deg,rgba(253,5,77,.18),rgba(255,138,29,.12))}.result-glyph{display:grid;place-items:center;flex:none;width:35px;height:35px;border-radius:9px;background:linear-gradient(130deg,#fd054d,#ff8a1d);color:#fff;font-size:17px}.connection-result strong,.connection-result small{display:block}.connection-result strong{color:#fff;font-size:12px}.connection-result small{color:#c4d0dd;font-size:10px}
.integration-breakdown{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:32px}.integration-breakdown article{position:relative;min-height:183px;padding:23px;border:1px solid #d3dee4;border-radius:14px;background:rgba(255,255,255,.83);box-shadow:0 15px 28px rgba(27,58,79,.07)}.integration-breakdown article::before{content:"";position:absolute;inset:0 0 auto;height:3px;border-radius:14px 14px 0 0;background:linear-gradient(90deg,#fd054d,#ff8a1d)}.break-number{color:#d44649;font:800 12px Manrope,Inter,sans-serif}.integration-breakdown h3{margin:12px 0 8px;color:#15263a;font-size:20px;line-height:1.2}.integration-breakdown p{margin:0;color:#566b7d;font-size:12px;line-height:1.6}
@media(max-width:800px){.story-display,.integration-visual{border-width:9px}.story-chapters,.integration-breakdown{grid-template-columns:1fr;gap:9px}.story-chapters article,.integration-breakdown article{min-height:0;padding:18px 21px}.story-chapters{margin-top:22px}.integration-breakdown{margin-top:22px}.integration-section .section-top{margin-bottom:36px}}
@media(max-width:560px){.story-display,.integration-visual{border-width:7px;border-radius:19px}.story-display{padding:14px}.story-tab{border:1px solid #d9d8d8;border-top:3px solid #d8d6d5}.story-tab.is-active{border-top-color:#e9264d}.connection-chrome{padding:0 10px;font-size:7px}.connection-chrome>span:last-child{display:none}.connection-content{padding:13px}.source-state{font-size:8px}.connection-heading strong{font-size:20px}.integration-visual{min-height:0}}

/* Full-width app frames for chapters 02 and 04. */
.story-frame,.integration-frame{overflow:hidden;border:16px solid transparent;border-radius:28px;background:linear-gradient(145deg,#13253a,#0b1b2d) padding-box,linear-gradient(110deg,#fd054d 0%,#ec3e43 48%,#ff8a1d 100%) border-box;box-shadow:0 34px 78px rgba(122,34,49,.25),0 0 65px rgba(249,78,54,.15)}
.feature-chrome{height:47px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;border-bottom:1px solid #405369;background:#101f31;color:#a6bdd2;font-size:10px;font-weight:800;letter-spacing:.12em}.feature-chrome>span:last-child{color:#f1a36c}
.story-frame .story-layout{padding:31px;gap:24px;background:radial-gradient(560px 420px at 98% 98%,rgba(245,91,43,.1),transparent 75%),#102136}.story-frame .story-tabs{gap:12px}.story-frame .story-tab{background:#1a2d43;border:1px solid #40566b;border-left:4px solid #5f7387;box-shadow:none}.story-frame .story-tab:hover,.story-frame .story-tab.is-active{background:linear-gradient(110deg,rgba(253,5,77,.22),rgba(255,138,29,.12));border-color:#ed6552;border-left-color:#f21e4e;box-shadow:0 9px 24px rgba(252,48,69,.17)}.story-frame .story-tab strong{color:#fff}.story-frame .story-tab small{color:#b6c7d7}.story-frame .story-tab-no{color:#ff9b57}
.story-frame .story-display{min-height:410px;border:1px solid #50667d;border-radius:15px;background:linear-gradient(145deg,#20374e,#14283d);box-shadow:0 17px 38px rgba(0,0,0,.18);padding:24px}
.integration-frame .integration-layout{padding:32px 36px;gap:45px;background:radial-gradient(560px 430px at 0% 100%,rgba(253,5,77,.15),transparent 72%),#102136}.integration-frame .integration-layout h2{color:#fff;font-size:clamp(38px,4vw,56px)}.integration-frame .integration-layout p{color:#c6d4e2}.integration-frame .text-link{color:#fff;border-bottom-color:#9eabb8}.integration-frame .text-link:hover{color:#ffa369;border-bottom-color:#ffa369}.integration-frame .integration-visual{min-height:405px;border:1px solid #557088;border-radius:15px;background:#13283d;box-shadow:0 16px 39px rgba(0,0,0,.2)}.integration-frame .connection-content{padding:17px}.integration-frame .connection-chrome{background:#14283d}
@media(max-width:800px){.story-frame,.integration-frame{border-width:10px;border-radius:23px}.story-frame .story-layout,.integration-frame .integration-layout{padding:21px;gap:20px}.story-frame .story-tab{border:1px solid #40566b;border-top:3px solid #5f7387}.story-frame .story-tab.is-active{border-top-color:#f21e4e}.story-frame .story-display{min-height:390px}.integration-frame .integration-visual{min-height:0}}
@media(max-width:560px){.story-frame,.integration-frame{border-width:7px;border-radius:19px}.feature-chrome{height:37px;padding:0 10px;font-size:7px;letter-spacing:.05em}.feature-chrome>span:last-child{display:none}.story-frame .story-layout,.integration-frame .integration-layout{padding:10px;gap:12px}.story-frame .story-tab{padding:10px 6px}.story-frame .story-tab strong{font-size:11px}.story-frame .story-display{min-height:420px;padding:13px}.integration-frame .integration-layout h2{font-size:clamp(34px,9vw,48px)}}