/* Community360 Enterprise AI — Workflows R7 · 2026-11-03
   Zoom-aware enterprise layout without modifying global page max-width.
   Separate independent lanes avoid shared-grid-row empty space when expanded.
   Exact source acceptance and external-provider caveats are preserved. */
#workflows.c360p-workflows-r7 {
  position:relative;
  overflow:clip;
  background:
    radial-gradient(ellipse at 92% 8%,rgba(255,0,102,.032),transparent 34%),
    linear-gradient(180deg,var(--c360-paper),var(--c360-soft));
  padding:clamp(59px,5.5vw,112px) 0 clamp(56px,5.4vw,106px);
  min-width:0;
}
#workflows .c360p-r7-wrap {
  width:min(95vw,2600px);
  max-width:none;
  margin-inline:auto;
  min-width:0;
}
#workflows .c360p-r7-heading {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  align-items:center;
  gap:clamp(22px,4vw,65px);
  margin:0 0 clamp(32px,4vw,58px);
  min-width:0;
}
#workflows .c360p-r7-heading-copy {
  max-width:1500px;
  min-width:0;
}
#workflows .c360p-eyebrow {
  color:#b81356;
  font-size:clamp(11px,.64vw,17px);
  letter-spacing:.13em;
  line-height:1.6;
  margin:0 0 12px!important;
}
#workflows #c360p-workflows-title {
  color:var(--c360-ink);
  font-size:clamp(34px,3.05vw,65px);
  font-weight:860;
  letter-spacing:-.042em;
  line-height:1.17;
  text-wrap:balance;
  max-width:1550px;
  margin:0;
}
#workflows #c360p-workflows-title span {
  display:block;
  color:#b30b4e;
  font-weight:830;
}
#workflows .c360p-r7-heading-copy>p:last-child {
  color:var(--c360-muted);
  margin:19px 0 0;
  max-width:1250px;
  line-height:1.7;
  font-size:clamp(14px,1.04vw,22px);
}
#workflows .c360p-r7-assurance {
  padding:clamp(19px,2.2vw,38px);
  background:var(--c360-paper);
  border:1px solid var(--c360-border);
  border-radius:19px;
  box-shadow:0 17px 42px rgba(20,40,60,.055);
  min-width:0;
}
#workflows .c360p-r7-assurance-top {
  display:flex;
  align-items:center;
  gap:clamp(11px,1.3vw,20px);
}
#workflows .c360p-r7-assurance-number {
  display:grid;
  place-items:center;
  width:clamp(54px,4.7vw,93px);
  height:clamp(54px,4.7vw,93px);
  flex:0 0 auto;
  border-radius:15px;
  background:#fce8f1;
  border:1px solid #efbfd5;
  color:#af0d4e;
  font-size:clamp(25px,2vw,40px);
  font-weight:900;
  line-height:1;
}
#workflows .c360p-r7-assurance-top>div {
  display:grid;
  gap:4px;
  min-width:0;
}
#workflows .c360p-r7-assurance-top strong {
  font-size:clamp(16px,1.19vw,27px);
  line-height:1.25;
  letter-spacing:-.016em;
  font-weight:830;
}
#workflows .c360p-r7-assurance-top small {
  font-size:clamp(12px,.8vw,18px);
  color:var(--c360-muted);
  line-height:1.45;
}
#workflows .c360p-r7-assurance-chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:clamp(17px,1.6vw,26px);
}
#workflows .c360p-r7-assurance-chips span {
  background:var(--c360-soft);
  border:1px solid var(--c360-border);
  border-radius:50px;
  padding:7px 11px;
  color:var(--c360-ink);
  font-size:clamp(10px,.75vw,16px);
  font-weight:740;
  line-height:1.4;
}
#workflows .c360p-r7-assurance>p {
  padding-top:clamp(15px,1.5vw,26px);
  margin:clamp(14px,1.3vw,25px) 0 0!important;
  border-top:1px solid var(--c360-border);
  color:var(--c360-muted);
  font-size:clamp(12px,.86vw,20px);
  line-height:1.7;
}
#workflows .c360p-r7-mini-label {
  display:block;
  font-size:clamp(10px,.64vw,16px);
  font-weight:870;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#b61659;
  line-height:1.4;
}
#workflows .c360p-r7-maphead,
#workflows .c360p-r7-explorehead {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:clamp(13px,3vw,42px);
  flex-wrap:wrap;
  margin:0 0 clamp(16px,2.1vw,29px);
  min-width:0;
}
#workflows .c360p-r7-maphead h3,
#workflows .c360p-r7-explorehead h3 {
  font-size:clamp(22px,2.05vw,41px);
  font-weight:850;
  letter-spacing:-.03em;
  line-height:1.2;
  margin:6px 0 0;
  color:var(--c360-ink);
}
#workflows .c360p-r7-map-subtitle,
#workflows .c360p-r7-explorehead>p {
  font-size:clamp(12px,.94vw,20px);
  color:var(--c360-muted);
  line-height:1.6;
  max-width:1030px;
  margin:0!important;
}
#workflows .c360p-r7-explorehead {
  margin-top:clamp(29px,3vw,60px);
}
/* The five-step operating model uses the full dedicated section width. */
#workflows .c360p-r7-journey {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(10px,1.3vw,28px);
  background:var(--c360-paper);
  border:1px solid var(--c360-border);
  border-radius:19px;
  padding:clamp(15px,1.65vw,36px);
  margin:0;
  box-shadow:0 10px 32px rgba(16,33,55,.038);
  min-width:0;
}
#workflows .c360p-r7-journey>div {
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
  padding:clamp(12px,1.4vw,28px);
  border:1px solid var(--c360-border);
  border-radius:13px;
  background:var(--c360-soft);
  position:relative;
}
#workflows .c360p-r7-journey>div:not(:last-child)::after {
  content:"→";
  position:absolute;
  right:calc(-1 * clamp(15px,1.5vw,30px));
  top:50%;
  transform:translateY(-50%);
  z-index:1;
  color:#c91b64;
  font-size:clamp(20px,1.3vw,28px);
  line-height:1;
  font-weight:750;
}
#workflows .c360p-r7-journey>div>span {
  display:grid;
  place-items:center;
  width:clamp(36px,2.9vw,64px);
  height:clamp(36px,2.9vw,64px);
  margin-bottom:clamp(9px,1vw,18px);
  border-radius:50%;
  border:1px solid #ecb6cf;
  color:#a10047;
  background:#fbe7f1;
  font-size:clamp(12px,.92vw,21px);
  font-weight:870;
}
#workflows .c360p-r7-journey>div>strong {
  font-size:clamp(15px,1.15vw,28px);
  line-height:1.25;
  font-weight:830;
  color:var(--c360-ink);
  margin:0;
}
#workflows .c360p-r7-journey>div>small {
  font-size:clamp(12px,.85vw,20px);
  color:var(--c360-muted);
  line-height:1.4;
  overflow-wrap:anywhere;
}
/* Two independently growing lanes: opening any item does not stretch its
   opposite-neighbour row or introduce an empty block. */
#workflows .c360p-r7-workflow-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(15px,2vw,38px);
  width:100%;
  max-width:none;
  margin:0;
  align-items:start;
  min-width:0;
}
#workflows .c360p-r7-lane {
  display:flex;
  flex-direction:column;
  gap:clamp(13px,1.5vw,27px);
  min-width:0;
}
#workflows .c360p-r7-lane .c360p-workflow {
  min-width:0;
  margin:0;
  background:var(--c360-paper);
  border:1px solid var(--c360-border);
  border-radius:15px;
  box-shadow:0 8px 24px rgba(16,35,61,.034);
  overflow:hidden;
  break-inside:avoid;
}
#workflows .c360p-r7-lane .c360p-workflow:hover {
  border-color:#ee9cbf;
  box-shadow:0 13px 30px rgba(16,35,61,.065);
}
#workflows .c360p-r7-lane .c360p-workflow[open] {
  border-color:#db5f92;
  box-shadow:0 17px 37px rgba(16,35,61,.075);
}
#workflows .c360p-r7-lane .c360p-workflow summary {
  display:grid;
  grid-template-columns:clamp(42px,3.6vw,72px) minmax(0,1fr) auto 30px;
  gap:clamp(10px,1.2vw,23px);
  align-items:center;
  min-height:clamp(88px,6.8vw,150px);
  padding:clamp(17px,1.6vw,33px);
  cursor:pointer;
}
#workflows .c360p-r7-lane .c360p-workflow[open] summary {
  border-bottom:1px solid var(--c360-border);
}
#workflows .c360p-r7-lane .c360p-workflow-icon {
  width:clamp(42px,3.6vw,72px);
  height:clamp(42px,3.6vw,72px);
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#fae7f1;
  color:#a50048;
  font-size:clamp(13px,1vw,22px);
  font-weight:900;
  flex:0 0 auto;
}
#workflows .c360p-r7-lane .c360p-workflow summary span:nth-child(2) {
  min-width:0;
  display:block;
}
#workflows .c360p-r7-lane .c360p-workflow summary b {
  font-size:clamp(15px,1.16vw,27px);
  font-weight:850;
  letter-spacing:-.017em;
  line-height:1.38;
  color:var(--c360-ink);
}
#workflows .c360p-r7-lane .c360p-workflow summary small {
  font-size:clamp(11.5px,.87vw,20px);
  margin-top:6px;
  color:var(--c360-muted);
  line-height:1.4;
}
#workflows .c360p-r7-lane .c360p-workflow-count {
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  border:1px solid var(--c360-border);
  border-radius:30px;
  background:var(--c360-soft);
  padding:7px 10px;
  color:var(--c360-muted);
  font-size:clamp(10px,.67vw,17px);
  line-height:1.35;
  font-weight:800;
}
#workflows .c360p-r7-lane .c360p-chevron {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  color:#b10b52;
  font-size:clamp(22px,1.4vw,32px);
  line-height:1;
  font-weight:450;
}
#workflows .c360p-r7-lane .c360p-workflow ol {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(9px,1vw,20px);
  padding:clamp(14px,1.4vw,29px);
  margin:0;
  background:var(--c360-soft);
  counter-reset:c360-stage;
  list-style:none;
}
#workflows .c360p-r7-lane .c360p-workflow ol li {
  display:grid;
  grid-template-columns:clamp(24px,2vw,40px) minmax(0,1fr);
  gap:clamp(8px,.9vw,18px);
  min-width:0;
  align-items:start;
  padding:clamp(11px,1vw,21px);
  border:1px solid var(--c360-border);
  border-radius:11px;
  background:var(--c360-paper);
  color:var(--c360-muted);
  font-size:clamp(12px,.8vw,20px);
  line-height:1.6;
  overflow-wrap:anywhere;
  counter-increment:c360-stage;
}
#workflows .c360p-r7-lane .c360p-workflow ol li::before {
  content:counter(c360-stage,decimal-leading-zero);
  background:#fbe8f0;
  border-radius:7px;
  font-size:clamp(10px,.65vw,16px);
  font-weight:850;
  color:#a5004b;
  min-height:clamp(24px,2vw,40px);
  display:grid;
  place-items:center;
}
#workflows .c360p-r7-lane .c360p-workflow ol li:last-child:nth-child(odd) {
  grid-column:1/-1;
}
#workflows .c360p-r7-bottomline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  border:1px solid var(--c360-border);
  border-radius:14px;
  padding:clamp(17px,1.8vw,34px);
  margin:clamp(30px,4vw,65px) 0 0;
  background:var(--c360-paper);
  min-width:0;
}
#workflows .c360p-r7-bottomline p {
  font-size:clamp(13px,.95vw,21px);
  line-height:1.5;
  color:var(--c360-muted);
  max-width:1300px;
  margin:0!important;
}
#workflows .c360p-r7-bottomline p strong {color:var(--c360-ink);}
#workflows .c360p-r7-bottomline a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:11px 18px;
  border-radius:10px;
  font-size:clamp(12px,.83vw,20px);
  line-height:1.4;
  color:#fff;
  background:#c50050;
  font-weight:790;
  text-align:center;
  text-decoration:none;
  white-space:normal;
}
#workflows .c360p-r7-bottomline a:hover {background:#a90045;}
#workflows a:focus-visible,
#workflows summary:focus-visible,
#workflows .c360p-r7-journey:focus-visible {
  outline:3px solid #e860a1;
  outline-offset:3px;
}
/* Independent columns are used only when there is enough CSS layout width.
   At normal laptop widths every disclosure remains full width. */
@media(max-width:1199px) {
 #workflows .c360p-r7-workflow-grid {grid-template-columns:1fr;}
 #workflows .c360p-r7-lane {gap:14px;}
}
@media(max-width:1100px) {
 #workflows .c360p-r7-heading {grid-template-columns:1fr;gap:22px;}
 #workflows .c360p-r7-assurance {max-width:none;}
 #workflows .c360p-r7-workflow-grid {gap:14px;}
 #workflows .c360p-r7-journey {gap:8px;padding:13px;}
 #workflows .c360p-r7-journey>div {padding:12px;}
 #workflows .c360p-r7-journey>div:not(:last-child)::after {display:none;}
 #workflows .c360p-r7-lane .c360p-workflow summary {min-height:91px;}
}
@media(max-width:700px) {
 #workflows.c360p-workflows-r7 {padding:51px 0 55px;}
 #workflows .c360p-r7-wrap {width:calc(100% - 32px);}
 #workflows .c360p-r7-heading {margin-bottom:27px;gap:16px;}
 #workflows #c360p-workflows-title {font-size:clamp(29px,5.7vw,37px);}
 #workflows .c360p-r7-heading-copy>p:last-child {margin-top:13px;}
 #workflows .c360p-r7-assurance {padding:17px;}
 #workflows .c360p-r7-maphead,#workflows .c360p-r7-explorehead {margin-bottom:15px;}
 #workflows .c360p-r7-maphead h3,#workflows .c360p-r7-explorehead h3 {font-size:22px;}
 #workflows .c360p-r7-journey {
   display:grid;
   grid-template-columns:repeat(5,minmax(142px,1fr));
   gap:10px;
   overflow-x:auto;
   scrollbar-width:thin;
   overscroll-behavior-x:contain;
   scroll-snap-type:x proximity;
   scroll-padding:14px;
   padding:13px;
 }
 #workflows .c360p-r7-journey>div {scroll-snap-align:start;}
 #workflows .c360p-r7-explorehead {margin-top:28px;}
 #workflows .c360p-r7-lane .c360p-workflow summary {
   grid-template-columns:42px minmax(0,1fr) 21px;
   gap:11px;min-height:88px;padding:16px;
 }
 #workflows .c360p-r7-lane .c360p-workflow-icon {width:42px;height:42px;}
 #workflows .c360p-r7-lane .c360p-workflow-count {display:none;}
 #workflows .c360p-r7-lane .c360p-chevron {width:21px;height:25px;}
 #workflows .c360p-r7-lane .c360p-workflow ol {
   grid-template-columns:1fr;gap:9px;padding:12px;
 }
 #workflows .c360p-r7-lane .c360p-workflow ol li:last-child:nth-child(odd){grid-column:auto;}
 #workflows .c360p-r7-bottomline {margin-top:26px;padding:17px;}
 #workflows .c360p-r7-bottomline a{width:100%;}
}
@media(max-width:420px) {
 #workflows .c360p-r7-wrap {width:calc(100% - 28px);}
 #workflows #c360p-workflows-title {font-size:clamp(28px,6.6vw,32px);}
 #workflows .c360p-r7-assurance-number {width:50px;height:50px;font-size:25px;}
 #workflows .c360p-r7-lane .c360p-workflow summary {padding:14px 11px;gap:9px;grid-template-columns:35px minmax(0,1fr) 19px;}
 #workflows .c360p-r7-lane .c360p-workflow-icon {width:35px;height:35px;font-size:11px;}
 #workflows .c360p-r7-lane .c360p-workflow summary b{font-size:14px;}
 #workflows .c360p-r7-lane .c360p-workflow summary small{font-size:11px;}
}
/* Ultra-wide effective CSS viewports (often created by desktop zoom-out):
   keep typography readable and use available screen real estate intentionally. */
@media(min-width:2400px) {
 #workflows.c360p-workflows-r7 {padding:clamp(100px,4vw,170px) 0;}
 #workflows .c360p-r7-heading {gap:76px;margin-bottom:65px;}
 #workflows #c360p-workflows-title {font-size:clamp(54px,1.7vw,78px);}
 #workflows .c360p-r7-heading-copy>p:last-child {font-size:clamp(20px,.66vw,29px);}
 #workflows .c360p-r7-assurance-top strong {font-size:clamp(23px,.9vw,33px);}
 #workflows .c360p-r7-assurance>p {font-size:clamp(17px,.57vw,24px);}
 #workflows .c360p-r7-maphead h3,#workflows .c360p-r7-explorehead h3 {font-size:clamp(35px,1.25vw,54px);}
 #workflows .c360p-r7-map-subtitle,#workflows .c360p-r7-explorehead>p {font-size:clamp(18px,.6vw,27px);}
 #workflows .c360p-r7-lane .c360p-workflow summary b {font-size:clamp(23px,.74vw,31px);}
 #workflows .c360p-r7-lane .c360p-workflow summary small {font-size:clamp(18px,.55vw,25px);}
 #workflows .c360p-r7-lane .c360p-workflow-count {font-size:clamp(16px,.5vw,22px);}
 #workflows .c360p-r7-lane .c360p-workflow ol li{font-size:clamp(18px,.55vw,26px);}
 #workflows .c360p-r7-bottomline p{font-size:clamp(20px,.63vw,28px);}
}
html[data-theme="dark"] #workflows .c360p-r7-assurance-number,
html[data-theme="dark"] #workflows .c360p-r7-journey>div>span,
html[data-theme="dark"] #workflows .c360p-r7-lane .c360p-workflow-icon,
html[data-theme="dark"] #workflows .c360p-r7-lane .c360p-workflow ol li::before {
  background:#3c293e;
  color:#ffc3df;
  border-color:#5d3c54;
}
html[data-theme="dark"] #workflows #c360p-workflows-title span,
html[data-theme="dark"] #workflows .c360p-r7-mini-label,
html[data-theme="dark"] #workflows .c360p-eyebrow {
 color:#ff91c0;
}
@media(prefers-reduced-motion:reduce) {
 #workflows * {scroll-behavior:auto!important;animation:none!important;transition:none!important;}
}